淺談網站效能之前端效能優化

acrens發表於2019-02-16
網站前端優化

最近專案慢慢走上正軌，需求趨於平穩，這才想起需要對整站進行效能優化。經過一段時間的學習，結合現在專案的實際效能情況，發現確實有許多地方可以進行優化。於是就開始了我的前端效能優化之旅。以下內容僅為個人理解，如果本內容大家覺得哪裡寫的不對，望大家指出，供一起討論。

淺談網站效能之前端效能優化

效能優化的目的無非是減少使用者流量消耗，提升使用者首屏體驗，提升使用者訪問速度，讓使用者專注內容本身。

前端效能優化

  1. 減少 HTTP 請求數量

    • 基本原理：在瀏覽器與伺服器進行通訊時，主要是通過 HTTP 進行通訊。瀏覽器與伺服器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資原始檔併發請求數量有限（不同瀏覽器允許併發數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站效能進行優化。

      1. CSS Sprites：國內俗稱 CSS 精靈，這是將多張圖片合併成一張圖片達到減少 HTTP 請求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內容。這種方案同時還可以減少圖片總位元組數，節省命名詞彙量（由命名多張圖片檔案變成一張，哈哈哈）。

      2. 合併 CSS 和 JS 檔案：現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個 CSS 或者 多個 JS 合併成一個檔案。

      3. 採用 lazyLoad：俗稱懶載入，可以控制網頁上的內容在一開始無需載入，不需要發請求，等到使用者操作真正需要的時候立即載入出內容。這樣就控制了網頁資源一次性請求數量。

  2. 控制資原始檔載入優先順序

    • 基本原理：說到這裡就需要知道瀏覽器載入 HTML 內容的原理，瀏覽器在載入 HTML 內容時，是將 HTML 內容從上至下依次解析，解析到 link 或者 script 標籤就會載入 href 或者 src 對應連結內容，為了第一時間展示頁面給使用者，就需要將 CSS 提前載入，不要受 JS 載入影響。

      1. 遵循原則：主要檔案放在 head 內部，次要檔案放在 body 底部。一般情況下都是 CSS 在頭部，JS 在底部。

  3. 利用瀏覽器快取

    • 基本原理：瀏覽器快取分強快取和協商快取，他們是將網路資源儲存在本地，等待下次請求該資源時，如果命中就不需要到伺服器重新請求該資源，直接在本地讀取該資源。

      1. 強快取：在 web 伺服器返回的響應中新增 Expires 和 Cache-Control Header。

      2. 協商快取：通過【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對 Header 分別管理。

  4. 使用 CDN

  5. 減少重排（Reflow）

    • 基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過於頻繁，CPU 使用率就會急劇上升。

      1. 減少 Reflow，如果需要在 DOM 操作時新增樣式，儘量使用 增加 class 屬性，而不是通過 style 操作樣式。

  6. 減少 DOM 操作

  7. 圖示使用 IconFont 替換

花絮

在開始提筆寫這篇部落格前就遇到了一個很棘手的問題，這篇部落格標題叫什麼，思考了一會，我心裡冒出了三個答案：

  1. 淺談網站效能優化

    • 第一個標題網站效能優化，一看標題可以理解為是講網站效能，而且是對網站進行優化，描述的是一種解決方案，然而網站效能包括的太多了，超出了我的知識範疇，所以放棄。

  2. 淺談網站效能之前端效能優化

    • 第二個標題正適我懷，答題概括了我本期部落格內容，既有效能介紹，又有前端效能優化解決方案。

  3. 淺談前端效能優化

    • 第三個標題前端效能優化，心想這不就是我要寫的內容嘛，等我寫完內容發現，不對，我寫的內容不僅僅是解決方案，好包括的其他內容，所以放棄。

以上內容僅為個人理解，如果本內容大家覺得哪裡寫的不對，望大家指出，供一起討論，點選此處更多文章。

相關文章