瀏覽器工作原理（二）：瀏覽器渲染過程概述
阿新 • • 發佈：2018-05-15
sync 結構 dom end 繪制 fault 異步加載 步驟 targe
參考：https://segmentfault.com/a/1190000012925872#articleHeader4
瀏覽器器內核拿到內容後，渲染大概可以劃分成以下幾個步驟：
- 解析html建立dom樹
- 解析css構建render樹（將CSS代碼解析成樹形的數據結構，然後結合DOM合並成render樹）
- 布局render樹（Layout/reflow），負責各元素尺寸、位置的計算
- 繪制render樹（paint），繪制頁面像素信息
- 瀏覽器會將各層的信息發送給GPU，GPU會將各層合成（composite），顯示在屏幕上。
所有詳細步驟都已經略去，渲染完畢後就是load事件，對應JS邏輯處理
load事件與DOMContentLoaded事件的先後
- DOMContentLoaded 事件：僅當DOM加載完成，不包括樣式表，圖片。如果有async加載的腳本就不一定完成
- onload 事件：頁面上所有的DOM，樣式表，腳本，圖片都已經加載完成，渲染完畢
所以，順序是：DOMContentLoaded -> load
頭部引入css加載是否會阻塞dom樹渲染？
首先，css是由單獨的下載線程異步下載的。
然後再說下幾個現象：
- css加載不會阻塞DOM樹解析（異步加載時DOM照常構建）
- 但會阻塞render樹渲染（渲染時需等css加載完畢，因為render樹需要css信息）
這可能也是瀏覽器的一種優化機制。
因為加載css的時候，可能會修改DOM節點的樣式，如果css加載不阻塞render樹渲染的話，那麽當css加載完之後，可能引起重繪或者回流，造成沒有必要的損耗。
所以，先把DOM樹的結構先解析完，然後等css加載完之後，再根據最終的樣式來渲染render樹，以此優化性能。
瀏覽器工作原理（二）：瀏覽器渲染過程概述