WEB前端效能最佳化常見方法

標籤：獲得   icon   瀏覽器緩衝   設定   個數   asc   ges   簡單的   大小   

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前端效能最佳化常見方法

WEB前端效能最佳化常見方法