前段時(shí)間有很多同學(xué)通過(guò)不同渠道問(wèn)我關(guān)于瀏覽器渲染的問(wèn)題。今天，小郭在這里用簡(jiǎn)單的一張圖概括出瀏覽器渲染的全過(guò)程。
廢話不多說(shuō)，直接上圖
- 渲染進(jìn)程收到HTML 文檔后，遍歷文檔節(jié)點(diǎn)并轉(zhuǎn)換為能夠讀懂的DOM 樹結(jié)構(gòu)；
- 渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets對(duì)象，每一個(gè)對(duì)象都包含CSS規(guī)則。根據(jù)CSS規(guī)則對(duì)象計(jì)算出 DOM 節(jié)點(diǎn)的樣式；
- 創(chuàng)建渲染樹，并計(jì)算元素的布局信息。布局階段會(huì)從渲染樹的根節(jié)點(diǎn)開始遍歷，然后確定每個(gè)節(jié)點(diǎn)對(duì)象在頁(yè)面上的確切大小與位置，布局階段的輸出是一個(gè)盒子模型，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。對(duì)渲染樹進(jìn)行分層，并生成分層樹。
- 為每個(gè)圖層生成繪制列表，并將其提交到合成線程。合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖。合成線程發(fā)送繪制圖塊命令DrawQuad給瀏覽器進(jìn)程。
- 瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁(yè)面，并顯示到顯示器上。
寫到這里一定有很不少人好奇，為什么我們寫頁(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樹的構(gòu)建，如果JavaScript腳本還操作了CSSOM，而正好這個(gè)CSSOM還沒有下載和構(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)
