1、構(gòu)建dom樹：html解析器

過程中遇到?jīng)]有defer和async屬性的<script>時，會中斷解析，加載<script>文件并立即執(zhí)行

到遇到有defer或async屬性的<script>時，

1.1.文檔解析時，遇到設(shè)置了defer的腳本，就會在后臺進(jìn)行下載，但是并不會阻止文檔的渲染，當(dāng)頁面解析&渲染完畢后。

會等到所有的defer腳本加載完畢并按照順序執(zhí)行（引入順序），DOMContentLoaded事件調(diào)用之前。

1.2.async腳本會在加載完畢后執(zhí)行。

async腳本的加載不計入DOMContentLoaded事件統(tǒng)計。

2、構(gòu)建css樹：css解析器

3、構(gòu)建render樹：dom樹+css樹

4、布局layout與繪制paint

計算對象之間的大小、距離，確定每個節(jié)點(diǎn)在屏幕上的確切坐標(biāo)，映射瀏覽器屏幕繪制，使用UI后端層繪制每一個節(jié)點(diǎn)

reflow（回流）：當(dāng)元素屬性發(fā)生改變且影響布局時（寬高、內(nèi)外邊距等），產(chǎn)生回流，相當(dāng)于刷新頁面

repaint（重繪）：當(dāng)元素屬性發(fā)生改變且不影響布局時（顏色、透明度等），產(chǎn)生重繪，相當(dāng)于不刷新頁面，動態(tài)更新內(nèi)容。

重繪不一定引起回流，回流必將引起重繪。