Web性能優化

1 Web性能優化

Web網站的性能細線在幾個方面：

• 網站首頁加載速度

• 動畫的流暢度

經過分析瀏覽器的渲染原理、資源對渲染的影響，得出優化網站性能的辦法。

2 查看性能的工具

Chrome的Timeline面板錄製網頁加載的過程，分析記錄瀏覽器渲染過程當中每一個過程的耗時。

2.1 錄製時注意事項

1. 禁用瀏覽器緩存：Network Tab下的disable cache

2. 關閉Chrome擴展或者啓用隱身模式

3. 根據使用場景，模擬真實的網絡加載狀況：Network Tab下的throttling下拉按鈕

2.2 Timeline工具的各個組成

• 在Main Thread中能夠看到頁面渲染的整個過程及耗時

3 瀏覽器渲染原理

3.1 DOM樹構建

DOM樹的構建過程

1. 根據HTML文檔的內容，根據標籤進行分詞Token

2. 根據Token生產對應的節點Node

3. 將節點根據嵌套關係組合爲一棵對象節點樹DOM

瀏覽器解析文檔對象模型DOM是增量進行的，無需等待整個HTML文檔加載完畢，即可以開始解析DOM

CSSOM解析會阻塞HTML Parser；JavaScript腳本文件執行會阻塞HTML解析；CSS、JavaScript、Images和Font等靜態資源的異步加載的，渲染頁面與CSS解析與JavaScript執行會有相互的依賴

3.2 CSSOM樹的構建

CSSOM的解析依賴於選擇器，選擇器的匹配是從內到外的。因此選擇器嵌套層次越深，匹配的時間會越長。

CSSOM只解析可視部分body標籤中的內容，將全部匹配的元素共同構建一個CSSOM樹，從根節點一次向下，全部節點的屬性向下繼承

3.3 RenderTree樹的構建

利用DOM和CSSOM組合構建生成RenderTree，對應Recaculate Style

RenderTree中包含全部渲染網頁必須的節點

無需渲染的節點不會被添加到RenderTree中，如head和display:none;的節點

visibility: hidden;的節點會添加到RenderTree中

3.4 Layout

Layout利用渲染樹的信息，計算渲染樹中全部節點在頁面上的位置和大小。

相似繪畫中各個元素位置擺放及尺寸規劃

會引發頁面從新Layout的操做：全部改變節點位置和大小的操做

• 屏幕旋轉

• 瀏覽器視窗改變

• 與大小、位置相關的CSS屬性

• 增長與刪除DOM元素

Layout操做比較耗時，對於動畫中頻繁引發Layout的操做（元素位置移動），最好使用transform代替，可使用GPU進行動畫處理（將Layout重繪在GPU完成）

viewport

若是頁面body元素設置的寬度爲100%，而且根元素html沒有明確設置寬度絕對值，此時body元素的寬度等於viewport的寬度vw

• 使用meta標籤能夠設置瀏覽器viewport的尺寸。<meta name="viewport" content="width=device-width">

• device-width爲瀏覽器的理想視口（屏幕的物理分辨率）

• 在移動端，若是不設置device-width，默認viewport寬度爲980px，致使文字很小，須要放大

viewport至關於可視內容佈局的容器

3.5 Paint

填充Layout中的具體內容和樣式，將Layout生成的區域填充爲最終顯示在屏幕上的像素

3.6 總結

1. 瀏覽器經過GET請求獲取網頁HTML，同時將增量解析HTML文檔，生成DOM樹

2. 解析DOM節點樹時，對於須要加載的資源所有執行異步加載，可是CSS的解析、JavaScript的執行與font文件的下載會阻塞HTML Parser

3. 局部DOM樹與CSSOM樹構建完成後，當即組裝RenderTree進行渲染

4 資源對渲染的影響

頁面中加載的資源主要包括：css、js腳本文件和font字體與images靜態資源，不一樣資源類型對渲染的影響不一樣。

4.1 瀏覽器渲染頁面的時機

增量解析解析DOM樹，而且完成相應CSSOM解析後（RenderTree依賴於DOM樹，CSSOM樹），開始直接渲染頁面。

4.2 CSS加載會阻塞初次渲染

4.3 非關鍵資源

對於首頁無關的樣式，須要使用適當的方式避免其阻塞初次渲染：

• document.write()會阻塞頁面初次渲染

• 使用media=print媒體查詢，雖然加載樣式表，但只針對打印時才應用該樣式，不會阻塞初次渲染。

• 經過DOMAPI引入CSS，能夠避免阻塞。

• CSS中<link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">。

4.4 JS文件

• 輸出：先輸出Hello，10s以後再輸出World。JS腳本執行會阻塞HTML Parser，可是HTML Parser是增量解析的，而且CSS樣式的解析會阻塞JS腳本執行，當解析完Hello時，生成對應DOM節點，而且完成其CSSOM，直接開始渲染Hello節點。

• 腳本執行完成後再解析後續的World

JS腳本執行會阻塞HTML Parser；

CSS解析會阻塞JS腳本執行：js可能會讀、寫CSSOM

雖然JS會阻塞HTML Parser解析；可是瀏覽器的資源異步加載機制Preload會異步加載head標籤內的資源

4.5 非關鍵JS資源解析阻塞的優化方案

• 將JS資源文件放在文檔底部，延遲JS的執行（可是存在必須解析完HTML才能加載JS資源，相較於head標籤中加載會慢）

• 使用defer延遲腳本執行：scipt標籤的defer屬性，腳本會在HTML文檔解析完畢後再開始執行；被defer的腳本在執行時嚴格按照HTML文檔中出現的順序執行---優點能夠提前加載JS資源，可是解析完HTML再執行

• 使用async異步執行腳本：

  • 當script標籤有async屬性時，腳本執行不會阻塞HTML Parser，只要腳本加載完畢便開始執行

  • 被async的腳本，不會嚴格按照在HTML文檔中的順序執行

  • async適用於無依賴的外部獨立資源（注意不要錯誤操做狀態）

4.6 font字體文件

• font字體文件會阻塞內容渲染
  

4.7 圖片資源

圖片資源的加載不會阻塞渲染，可是最好在HTML標籤中設置圖片的高度和寬度，能夠在Layout時留出圖片渲染的空間，避免頁面的抖動

5 優化關鍵渲染路徑

優化目標是將下列三個指標壓縮到最低：

• 關鍵資源數---初次渲染時依賴的資源

• 關鍵資源的體積最小---壓縮文件或圖片

• 關鍵資源網絡來回數---網絡傳輸資源消耗不少時間

6 其他優化過程

• HTTP2能夠在傳輸HTML頁面後向客戶端推送頁面內包含的資源

• 減小資源的大小：壓縮

• 減小請求的來回時間

參考：奇舞團瓜瓜老師