1、瀏覽器渲染過(guò)程
瀏覽器的渲染過(guò)程共分為幾個(gè)過(guò)程:
JavaScript ——> Style ——> Layout ——> Paint ——> Composite
1.1. Layout階段
計(jì)算DOM節(jié)點(diǎn)的最終樣式，生成Layout tree，這棵樹(shù)類(lèi)似DOM樹(shù)，樹(shù)中記錄了參與的頁(yè)面的布局以及樣式，節(jié)點(diǎn)的最終布局尺寸以及位置。
該階段中主要是分為2個(gè)步驟：一個(gè)是樣式計(jì)算，另外一個(gè)是生成布局對(duì)象(LayoutObject)
- 瀏覽器計(jì)算樣式的步驟：
首先瀏覽器會(huì)遍歷一遍DOM，然后在CSSOM中查找對(duì)應(yīng)元素匹配的樣式，找到對(duì)應(yīng)的元素的樣式定義的時(shí)候，接著進(jìn)行CSS選擇器優(yōu)先級(jí)排序，得到對(duì)應(yīng)元素最終計(jì)算后的樣式，以類(lèi)ComputedStyle體現(xiàn)出來(lái)。
DOM遍歷完之后，就會(huì)得到一個(gè)新的樹(shù)，就是Layout階段的Layout tree，這棵樹(shù)雖然是從DOM樹(shù)中構(gòu)建而來(lái)，但并不是建立在DOM樹(shù)上，也就是Layout tree有自己的根節(jié)點(diǎn)和孩子節(jié)點(diǎn)。
1.2.Paint階段
該階段會(huì)遍歷Layout tree中的每個(gè)節(jié)點(diǎn)，根據(jù)節(jié)點(diǎn)布局方式和內(nèi)容，調(diào)用節(jié)點(diǎn)的業(yè)務(wù)邏輯(比如：繪制Rect、Border、Text等)，這些繪制結(jié)果以draw commands的形式保存下來(lái)。
1.3. 使用devtool查看渲染
藍(lán)色的虛線之前表示觸發(fā)了瀏覽器的DomContentLoaded事件，表示瀏覽器已經(jīng)完成了對(duì)頁(yè)面的解析工作，它對(duì)應(yīng)的Main（JS線程）在這之前完成了對(duì)HTML的解析工作，該過(guò)程也就是Parse HTML階段。
1.4、render樹(shù)
html的dom樹(shù) + css style 生成了render樹(shù)
2、V8引擎解析js代碼
在解析js代碼的過(guò)程中，主要?dú)v經(jīng)三個(gè)過(guò)程，①通過(guò)parser解析器生成AST抽象語(yǔ)法樹(shù) ②通過(guò)interpreter將AST抽象語(yǔ)法樹(shù)解析成機(jī)器能夠識(shí)別的字節(jié)碼 ③通過(guò)compiler編譯器編譯代碼
