DOM樹的構(gòu)建從何時(shí)開始？

瀏覽器渲染機(jī)制

1. 用戶輸入一個(gè)URL的時(shí)候，瀏覽器就會發(fā)送一個(gè)請求，請求URL對應(yīng)的資源。

2. 瀏覽器的HTML解析器會將這個(gè)文件解析，并且構(gòu)建成一棵DOM樹。(在生成DOM的最開始階段（應(yīng)該是Bytes → characters后），并行發(fā)起css、圖片、js的請求，無論他們是否在HEAD里。)

   • 注意：發(fā)起js文件的下載request并不需要DOM處理到那個(gè)script節(jié)點(diǎn)，比如：簡單的正則匹配就能做到這一點(diǎn)，雖然實(shí)際上并不一定是通過正則：）。這是很多人在理解渲染機(jī)制的時(shí)候存在的誤區(qū)

3. 在構(gòu)建DOM樹的時(shí)候，遇到 js 和 CSS元素，HTML解析器就換將控制權(quán)轉(zhuǎn)讓給JS解析器或者是CSS解析器。開始構(gòu)建CSSOM

4. DOM樹構(gòu)建完之后，瀏覽器把DOM樹中的一些不可視元素去掉，然后與CSSOM合成一棵render tree。

5. Layout：有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為Layout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

6. Painting：Layout后，瀏覽器已經(jīng)知道了哪些節(jié)點(diǎn)要顯示（which nodes are visible）、每個(gè)節(jié)點(diǎn)的CSS屬性是什么（their computed styles）、每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里（geometry）。就進(jìn)入了最后一步：Painting，按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。

以上幾個(gè)步驟因?yàn)镈OM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS屬性。Layout和Painting也會被重復(fù)執(zhí)行，除了DOM、CSSOM更新的原因外，圖片下載完成后也需要調(diào)用Layout 和 `Painting來更新網(wǎng)頁

DOM樹的構(gòu)建是從接受到文檔開始的 一邊會進(jìn)行將字節(jié)轉(zhuǎn)化為字符 字符轉(zhuǎn)化為標(biāo)記 標(biāo)記構(gòu)建dom樹
這個(gè)過程被分為標(biāo)記化和樹構(gòu)建
而這是一個(gè)漸進(jìn)的過程。為達(dá)到更好的用戶體驗(yàn)，呈現(xiàn)引擎會力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè) HTML 文檔解析完畢之后，就會開始構(gòu)建呈現(xiàn)樹和設(shè)置布局。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)，呈現(xiàn)引擎會將部分內(nèi)容解析并顯示出來。

可以從Chrome devtools里的Performance里面看到，先recieve data 然后再parse HTML