無論是網站，還是APP，都離不開web頁面的開發。web前端頁面優化是在整個項目的開發中是非常重要的，前端的性能好壞直接影響到用戶體驗。下面我們總結了一些常見的web前端優化方法分享給大家。

1.頁面內容優化

 

1) 減少HTTP請求：合并文件、CSS精靈、inline Image

2) 減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分布到恰當數量的主機名，平衡并行下載和DNS查詢

3) 避免重定向：多余的中間訪問

4) 使Ajax可緩存

5) 非必須組件延遲加載

6) 未來所需組件預加載

7) 減少DOM元素數量

8) 將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高并行下載量

9) 減少iframe數量

10) 不要404

 

2.CSS優化

 

1) 將樣式表放到頁面頂部 　

2) 不使用CSS表達式

3) 使用不使用@import　　　

4) 不使用IE的Filter

 

3.Javascript腳本優化

 

1) 將腳本放到頁面底部　　

2) 將javascript和css從外部引入

3) 壓縮javascript和css　　

4) 刪除不需要的腳本

5) 減少DOM訪問 　　　　

6) 合理設計事件監聽器

 

4.圖片優化

 

1) 優化圖片：根據實際顏色需要選擇色深、壓縮 　　

2) 優化css精靈

3) 不要在HTML中拉伸圖片 　

4) 保證favicon.ico小并且可緩存