 |
VOOZH | about |
|
VOOZH | about |
Web網站的性能細線在幾個方面：
網站首頁加載速度
動畫的流暢度
通過分析瀏覽器的渲染原理、資源對渲染的影響，得出優化網站性能的辦法。
Chrome的Timeline面板錄製網頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。
禁用瀏覽器緩存：Network Tab下的disable cache
關閉Chrome擴展或者啟用隱身模式
根據使用場景，模擬真實的網絡加載情況：Network Tab下的throttling下拉按鈕
在Main Thread中可以看到頁面渲染的整個過程及耗時
DOM樹的構建過程
根據HTML文檔的內容，根據標籤進行分詞Token
根據Token生產對應的節點Node
將節點根據嵌套關係組合為一棵對象節點樹DOM
瀏覽器解析文檔對象模型DOM是增量進行的，無需等待整個HTML文檔加載完畢，便可以開始解析DOM
CSSOM解析會阻塞HTML Parser；JavaScript腳本文件執行會阻塞HTML解析；CSS、JavaScript、Images和Font等靜態資源的異步加載的，渲染頁面與CSS解析與JavaScript執行會有相互的依賴
CSSOM的解析依賴於選擇器，選擇器的匹配是從內到外的。所以選擇器嵌套層次越深，匹配的時間會越長。
CSSOM只解析可視部分body標籤中的內容，將所有匹配的元素共同構建一個CSSOM樹，從根節點一次向下，所有節點的屬性向下繼承
利用DOM和CSSOM組合構建生成RenderTree，對應Recaculate Style
RenderTree中包含所有渲染網頁必須的節點
無需渲染的節點不會被添加到RenderTree中，如head和display:none;的節點
visibility: hidden;的節點會添加到RenderTree中
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相當於可視內容布局的容器
填充Layout中的具體內容和樣式，將Layout生成的區域填充為最終顯示在屏幕上的像素
瀏覽器通過GET請求獲取網頁HTML，同時將增量解析HTML文檔，生成DOM樹
解析DOM節點樹時，對於需要加載的資源全部執行異步加載，但是CSS的解析、JavaScript的執行與font文件的下載會阻塞HTML Parser
局部DOM樹與CSSOM樹構建完成後，立即組裝RenderTree進行渲染
頁面中加載的資源主要包括：css、js腳本文件和font字體與images靜態資源，不同資源類型對渲染的影響不同。
增量解析解析DOM樹，並且完成相應CSSOM解析後（RenderTree依賴於DOM樹，CSSOM樹），開始直接渲染頁面。
對於首頁無關的樣式，需要使用適當的方式避免其阻塞初次渲染：
document.write會阻塞頁面初次渲染
使用media=print媒體查詢，雖然加載樣式表，但只針對列印時才應用該樣式，不會阻塞初次渲染。
通過DOMAPI引入CSS，可以避免阻塞。
CSS中<link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">。
輸出：先輸出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標籤內的資源
將JS資源文件放在文檔底部，延遲JS的執行（但是存在必須解析完HTML才能加載JS資源，相較於head標籤中加載會慢）
使用defer延遲腳本執行：scipt標籤的defer屬性，腳本會在HTML文檔解析完畢後再開始執行；被defer的腳本在執行時嚴格按照HTML文檔中出現的順序執行---優勢可以提早加載JS資源，但是解析完HTML再執行
使用async異步執行腳本：
當script標籤有async屬性時，腳本執行不會阻塞HTML Parser，只要腳本加載完畢便開始執行
被async的腳本，不會嚴格按照在HTML文檔中的順序執行
async適用於無依賴的外部獨立資源（注意不要錯誤操作狀態）
font字體文件會阻塞內容渲染
圖片資源的加載不會阻塞渲染，但是最好在HTML標籤中設置圖片的高度和寬度，可以在Layout時留出圖片渲染的空間，避免頁面的抖動
優化目標是將下列三個指標壓縮到最低：
關鍵資源數---初次渲染時依賴的資源
關鍵資源的體積最小---壓縮文件或圖片
關鍵資源網絡來回數---網絡傳輸資源消耗很多時間
HTTP2可以在傳輸HTML頁面後向客戶端推送頁面內包含的資源
減少資源的大小：壓縮
減少請求的來回時間
本文由華宇互聯旗下領先品牌樂橙谷轉載！
