web解析過程

MiracleWong 發(fā)布于2019-08-01 16:48 / 1605人閱讀

摘要：所以選擇器嵌套層次越深，匹配的時(shí)間會(huì)越長。加載會(huì)阻塞初次渲染對于首頁無關(guān)的樣式，需要使用適當(dāng)?shù)姆绞奖苊馄渥枞醮武秩緯?huì)阻塞頁面初次渲染使用媒體查詢，雖然加載樣式表，但只針對打印時(shí)才應(yīng)用該樣式，不會(huì)阻塞初次渲染。通過引入，可以避免阻塞。

瀏覽器渲染原理

DOM解析

DOM樹構(gòu)建
過程：
1.根據(jù)HTML文檔的內(nèi)容，根據(jù)標(biāo)簽進(jìn)行分詞Token
2.根據(jù)Token生產(chǎn)對應(yīng)的節(jié)點(diǎn)Node
3.將節(jié)點(diǎn)根據(jù)嵌套關(guān)系組合成為一棵對象節(jié)點(diǎn)樹DOM

瀏覽器解析文檔對象模型DOM是增量進(jìn)行的，無需等待整個(gè)HTML文檔加載完畢，便可以開始解析DOM

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

css解析

CSSOM樹的構(gòu)建
CSSOM的解析依賴于選擇器，選擇器的匹配是從內(nèi)到外的。所以選擇器嵌套層次越深，匹配的時(shí)間會(huì)越長。

CSSOM只解析可視部分body標(biāo)簽中的內(nèi)容，將所有匹配的元素共同構(gòu)建一個(gè)CSSOM樹，從根節(jié)點(diǎn)一次向下，所有節(jié)點(diǎn)的屬性向下繼承

RenderTree樹的構(gòu)建

利用DOM和CSSOM組合構(gòu)建生成RenderTree，對應(yīng)Recaculate Style

RenderTree中包含所有渲染網(wǎng)頁必須的節(jié)點(diǎn)

無需渲染的節(jié)點(diǎn)不會(huì)被添加到RenderTree中，如head和display:none;的節(jié)點(diǎn)

visibility: hidden;的節(jié)點(diǎn)會(huì)添加到RenderTree中

瀏覽器通過GET請求獲取網(wǎng)頁HTML，同時(shí)將增量解析HTML文檔，生成DOM樹
解析DOM節(jié)點(diǎn)樹時(shí)，對于需要加載的資源全部執(zhí)行異步加載，但是CSS的解析、JavaScript的執(zhí)行與font文件的下載會(huì)阻塞HTML Parser
局部DOM樹與CSSOM樹構(gòu)建完成后，立即組裝RenderTree進(jìn)行渲染

瀏覽器渲染頁面的時(shí)機(jī)

增量解析解析DOM樹，并且完成相應(yīng)CSSOM解析后（RenderTree依賴于DOM樹，CSSOM樹），開始直接渲染頁面。

4.2 CSS加載會(huì)阻塞初次渲染

對于首頁無關(guān)的樣式，需要使用適當(dāng)?shù)姆绞奖苊馄渥枞醮武秩荆?/p>

document.write()會(huì)阻塞頁面初次渲染
使用media=print媒體查詢，雖然加載樣式表，但只針對打印時(shí)才應(yīng)用該樣式，不會(huì)阻塞初次渲染。
通過DOMAPI引入CSS，可以避免阻塞。
CSS中。