1. 解析html文件構(gòu)建dom樹
2. 處理css構(gòu)建CSSOM樹
3. 將DOM和CSSOM合并為渲染樹
4. 根據(jù)渲染樹布局，然后進(jìn)行繪制

script

在解析html時(shí)如果遇到了script標(biāo)簽，將會(huì)阻塞html的解析。如果是外部腳本，那么就需要等待獲取，以及js代碼執(zhí)行的完成，才會(huì)繼續(xù)dom樹的構(gòu)建。

由于script標(biāo)簽的阻塞，通常采用以下方式來(lái)進(jìn)行優(yōu)化

• 放在網(wǎng)頁(yè)body標(biāo)簽?zāi)┪?/li>
• 添加defer、async屬性使得不阻塞html的解析。雖然都會(huì)異步加載腳本，不過(guò)defer和async是有不同的：
  • defer會(huì)在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行。按順序執(zhí)行所有的script
  • async會(huì)在瀏覽器空閑允許的情況下執(zhí)行，并且是無(wú)序的，先加載完就先執(zhí)行

link

在解析html時(shí)如果遇到了樣式表，將會(huì)阻塞瀏覽器的渲染。直至CSSOM構(gòu)建完成。

• css加載不會(huì)阻塞DOM樹的解析
• css加載會(huì)阻塞DOM樹的渲染
• css加載會(huì)阻塞后邊js的執(zhí)行

回流和重繪

在頁(yè)面的渲染過(guò)程中，由于樣式和js可能會(huì)導(dǎo)致多次的渲染。也就涉及到了回流和重繪。

• 回流：當(dāng)render tree 的一部分或全部的元素因改變了自身的寬高，布局，顯示或隱藏，或者元素內(nèi)部的文字結(jié)構(gòu)發(fā)生變化 導(dǎo)致需要重新構(gòu)建頁(yè)面的時(shí)候，就造成了回流
• 重繪：當(dāng)一個(gè)元素自身的寬高，布局，及顯示或隱藏沒(méi)有改變，而只是改變了元素的外觀風(fēng)格的時(shí)候，就造成了重繪

回流必定觸發(fā)重繪，重繪不一定觸發(fā)回流

觸發(fā)回流的屬性：

• 盒模型相關(guān)屬性：width height padding margin display border-width border min-height
• 定位屬性及浮動(dòng)：top left bottom right position float clear
• 內(nèi)部文件結(jié)構(gòu)的改變等：text-align overflow-y font-weight overflow font-family line-height vertival-align white-space font-size
  觸發(fā)重繪的屬性:
• color border-style border-radius visibility text-decoration background outline box-shadow等

優(yōu)化：

• transform 代替top left margin-top margin-left等屬性
• 使用className 代替js操作多條樣式
• 盡量不使用table布局