WEB前端性能優化常見方法

web前端是應用服務器處理以前的部分，前端主要包括：HTML,CSS,javascript,image等各類資源，針對不一樣的資源有不一樣的優化方式。

1. 內容優化

(1)減小HTTP請求數:這條策略是最重要最有效的，由於一個完整的請求要通過DNS尋址，與服務器創建鏈接，發送數據，等待服務器響應，接收數據這樣一個消耗時間成本和資源成本的複雜的過程。
　　　　常見方法：合併多個CSS文件和js文件，利用CSS Sprites整合圖像，Inline Images(使用 data：URL scheme在實際的頁面嵌入圖像數據 )，合理設置HTTP緩存等。
(2)減小DNS查找
(3)避免重定向
(4)使用Ajax緩存
(5)延遲加載組件,預加載組件
(6)減小DOM元素數量:頁面中存在大量DOM元素,會致使javascript遍歷DOM的效率變慢。
(7)最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另外一個網站中。但其建立速度比其餘包括JavaScript和CSS的DOM元素的建立慢了1-2個數量級。
(8)避免404：HTTP請求時間消耗是很大的，所以使用HTTP請求來得到一個沒有用處的響應（例如404沒有找到頁面）是徹底沒有必要的，它只會下降用戶體驗而不會有一點好處。

2. 服務器優化

(1)使用內容分發網絡（CDN）：把網站內容分散到多個、處於不一樣地域位置的服務器上能夠加快下載速度。
(2)GZIP壓縮
(3)設置ETag：ETags（Entity tags，實體標籤）是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。
(4)提早刷新緩衝區
(5)對Ajax請求使用GET方法
(6)避免空的圖像src

3. Cookie優化

(1)減少Cookie大小
(2)針對Web組件使用域名無關的Cookie

4. CSS優化

(1)將CSS代碼放在HTML頁面的頂部
(2)避免使用CSS表達式
(3)使用<link>來代替@import
(4)避免使用Filters

5. javascript優化

(1)將JavaScript腳本放在頁面的底部。
(2)將JavaScript和CSS做爲外部文件來引用：在實際應用中使用外部文件能夠提升頁面速度，由於JavaScript和CSS文件都能在瀏覽器中產生緩存。
(3)縮小JavaScript和CSS
(4)刪除重複的腳本
(5)最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢。
(6)開發智能的事件處理程序
(7)javascript代碼注意：謹慎使用with,避免使用eval Function函數,減小做用域鏈查找。

6. 圖像優化

(1)優化圖片大小
(2)經過CSS Sprites優化圖片
(3)不要在HTML中使用縮放圖片
(4)favicon.ico要小並且可緩存

 

參考：WEB前端性能優化常見方法