web解析過程

瀏覽器渲染原理

DOM解析

DOM樹構建
過程：
1.根據HTML文檔的內容，根據標籤進行分詞Token
2.根據Token生產對應的節點Node
3.將節點根據嵌套關係組合成爲一棵對象節點樹DOM

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

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

css解析

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

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

RenderTree樹的構建

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

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

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

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

瀏覽器經過GET請求獲取網頁HTML，同時將增量解析HTML文檔，生成DOM樹
解析DOM節點樹時，對於須要加載的資源所有執行異步加載，可是CSS的解析、JavaScript的執行與font文件的下載會阻塞HTML Parser
局部DOM樹與CSSOM樹構建完成後，當即組裝RenderTree進行渲染

瀏覽器渲染頁面的時機

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

4.2 CSS加載會阻塞初次渲染

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

document.write()會阻塞頁面初次渲染
使用media=print媒體查詢，雖然加載樣式表，但只針對打印時才應用該樣式，不會阻塞初次渲染。
經過DOMAPI引入CSS，能夠避免阻塞。
CSS中<link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">。

哎呀文章有點亂了
搬運地址