解析 HTML 並建構 DOM ( Document Object Model) Tree
透過 HTML Tag 建立的 Tree 描述了文件的結構
Tree 中 反映了不同的 Tag 中的層級關係
DOM 節點越多 建構 DOM 的時間越長
當解析中遇到css 或圖片時會請求資源並繼續解析
但遇到 script 標籤會阻塞渲染 並停止解析
Preload Scanner
預加載器會先掃描外部的引用資源並先下載
Parsing CSS
建立 CSSOM Tree 和 DOM 結構類似
CSSOM 中包含了 所有樣式
css是阻塞渲染的 在瀏覽器接收完css前 內容無法渲染
從性能的角度來說 更少的特定選擇器相對更快
但對瀏覽器來說 這點消耗非常小
Render Tree
為了建立渲染樹 瀏覽器從 DOM 根節點開始決定哪些 CSS 規則被添加
而有 display: none 和 head 元素不會被放進 render tree 中