WEB前端效能優化常見方法

星空發表於2019-02-16

web前端是應用伺服器處理之前的部分,前端主要包括:HTML,CSS,javascript,image等各種資源,針對不同的資源有不同的優化方式。

  • 內容優化

    (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沒有找到頁面)是完全沒有必要的,它只會降低使用者體驗而不會有一點好處。
  • 伺服器優化

    (1)使用內容分發網路(CDN):把網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
    (2)GZIP壓縮
    (3)設定ETag:ETags(Entity tags,實體標籤)是web伺服器和瀏覽器用於判斷瀏覽器快取中的內容和伺服器中的原始內容是否匹配的一種機制。
    (4)提前重新整理緩衝區
    (5)對Ajax請求使用GET方法
    (6)避免空的影像src
  • Cookie優化

    (1)減小Cookie大小
    (2)針對Web元件使用域名無關的Cookie
  • CSS優化

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

    (1)將JavaScript指令碼放在頁面的底部。
    (2)將JavaScript和CSS作為外部檔案來引用:在實際應用中使用外部檔案可以提高頁面速度,因為JavaScript和CSS檔案都能在瀏覽器中產生快取。
    (3)縮小JavaScript和CSS
    (4)刪除重複的指令碼
    (5)最小化DOM的訪問:使用JavaScript訪問DOM元素比較慢。
    (6)開發智慧的事件處理程式
    (7)javascript程式碼注意:謹慎使用with,避免使用eval Function函式,減少作用域鏈查詢。
  • 影像優化

    (1)優化圖片大小
    (2)通過CSS Sprites優化圖片
    (3)不要在HTML中使用縮放圖片
    (4)favicon.ico要小而且可快取
    

    本文僅用來記錄自己在學習中的總結和思考。參考:http://developer.yahoo.com/pe…

相關文章