前段時(shí)間有很多同學(xué)通過(guò)不同渠道問(wèn)我關(guān)于瀏覽器渲染的問(wèn)題缝其。今天，小郭在這里用簡(jiǎn)單的一張圖概括出瀏覽器渲染的全過(guò)程徘六。
廢話(huà)不多說(shuō)内边，直接上圖
- 渲染進(jìn)程收到HTML 文檔后，遍歷文檔節(jié)點(diǎn)并轉(zhuǎn)換為能夠讀懂的DOM 樹(shù)結(jié)構(gòu)待锈；
- 渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets對(duì)象漠其，每一個(gè)對(duì)象都包含CSS規(guī)則。根據(jù)CSS規(guī)則對(duì)象計(jì)算出 DOM 節(jié)點(diǎn)的樣式竿音；
- 創(chuàng)建渲染樹(shù)和屎，并計(jì)算元素的布局信息。布局階段會(huì)從渲染樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷春瞬，然后確定每個(gè)節(jié)點(diǎn)對(duì)象在頁(yè)面上的確切大小與位置柴信，布局階段的輸出是一個(gè)盒子模型，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小宽气。對(duì)渲染樹(shù)進(jìn)行分層随常，并生成分層樹(shù)。
- 為每個(gè)圖層生成繪制列表抹竹，并將其提交到合成線程线罕。合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖窃判。合成線程發(fā)送繪制圖塊命令DrawQuad給瀏覽器進(jìn)程钞楼。
- 瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁(yè)面，并顯示到顯示器上袄琳。
寫(xiě)到這里一定有很不少人好奇询件，為什么我們寫(xiě)頁(yè)面時(shí)要把script標(biāo)簽放在頁(yè)面最低部呢燃乍？
別著急，答案就在下面宛琅。
這就是前端小伙伴經(jīng)常遇到的一個(gè)問(wèn)題：渲染阻塞
當(dāng)瀏覽器遇到一個(gè) script 標(biāo)記時(shí)刻蟹，DOM 構(gòu)建將暫停，直至腳本完成執(zhí)行嘿辟，然后繼續(xù)構(gòu)建DOM舆瘪。每次去執(zhí)行JavaScript腳本都會(huì)嚴(yán)重地阻塞DOM樹(shù)的構(gòu)建，如果JavaScript腳本還操作了CSSOM红伦，而正好這個(gè)CSSOM還沒(méi)有下載和構(gòu)建英古，瀏覽器甚至?xí)舆t腳本執(zhí)行和構(gòu)建DOM，直至完成其CSSOM的下載和構(gòu)建昙读。
所以召调，script 標(biāo)簽的位置很重要。實(shí)際使用時(shí)蛮浑，可以遵循下面兩個(gè)原則：
CSS 優(yōu)先：引入順序上唠叛，CSS 資源先于 JavaScript 資源；
JS置后：我們通常把JS代碼放到頁(yè)面底部沮稚，且JavaScript 應(yīng)盡量少影響 DOM 的構(gòu)建艺沼。
現(xiàn)在終于知道我們使用script的時(shí)候經(jīng)常將它置于頁(yè)面最底部的原因了。
另外蕴掏，這一點(diǎn)也是經(jīng)常在前端面試題中看到它的身影澳厢。
到這里瀏覽器渲染的全部流程已經(jīng)講述完畢，如果還有疑問(wèn)可以在下方留言囚似，大家一起討論剩拢。
有任何前端問(wèn)題可以私信我，想了解更多前端知識(shí)關(guān)注公眾號(hào)“一郭鮮”饶唤，小郭等著你的到來(lái)
