瀏覽器的渲染
瀏覽器的渲染流程如下:
圖:WebKit 主流程
圖:Mozilla 的 Gecko 呈現(xiàn)引擎主流程(3.6)
結(jié)合上圖,一個(gè)完整的渲染流程如下:
- 渲染進(jìn)程解析 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂的 DOM 樹結(jié)構(gòu),解析 CSS 為 CSSDOM
- 把 DOM 和 CSSOM 結(jié)合起來生成渲染樹(Render Tree)
- 渲染樹構(gòu)建好了之后,將會(huì)執(zhí)行布局過程,它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)
- 把渲染樹展示到屏幕上。再下一步就是繪制,即遍歷渲染樹,并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。
值得注意的是:
關(guān)鍵的點(diǎn)在于上述的 4 步并不是以嚴(yán)格順序執(zhí)行的。渲染引擎會(huì)以最快的速度展示內(nèi)容,也就是說,瀏覽器一邊解析 HTML,一邊構(gòu)建渲染樹,構(gòu)建一部分,就會(huì)把當(dāng)前已有的元素渲染出來。如果這個(gè)時(shí)候外部樣式并沒有加載完成,渲染出來的就是瀏覽器默認(rèn)樣式了。
其它階段也是如此。由于瀏覽器會(huì)嘗試盡快展示內(nèi)容,所以內(nèi)容有時(shí)會(huì)在樣式還沒有加載的時(shí)候展示出來。這就是經(jīng)常發(fā)生的FOCU(flash of unstyled content)或白屏問題。
CSS 加載不會(huì)阻塞 DOM 樹的解析
由瀏覽器的渲染流程圖可知,DOM 解析和 CSS 解析是兩個(gè)并行的進(jìn)程,所以 CSS 加載不會(huì)阻塞 DOM 樹的解析
CSS 加載會(huì)阻塞 DOM 樹的渲染
Render Tree是依賴于 DOM Tree 和 CSSOM Tree 的,所以無論 DOM Tree 是否已經(jīng)完成,它都必須等待到 CSSOM Tree 構(gòu)建完成,即 CSS 加載完成(或 CSS 加載失敗)后,才能開始渲染。
因此,CSS加載是會(huì)阻塞 DOM 樹的渲染
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
var p = document.querySelector('p')
console.log(p)
})
</script>
<link rel="stylesheet" href="./static/style.css?sleep=3000">
</head>
<body>
<p>hello world</p>
</body>
案例來源:關(guān)于 JS 與 CSS 是否阻塞 DOM 的渲染和解析
CSS 的加載并沒有阻塞 DOM 樹的解析,p 標(biāo)簽是正常解析的,但 p 標(biāo)簽加載完后,頁面是遲遲沒有渲染的,是因?yàn)?CSS 還沒有請求完成,在 CSS 請求完成后,hello world 才被渲染出來,所以 CSS 會(huì)阻塞頁面渲染
DOMContentLoaded:只有當(dāng)純 HTML 被完全加載以及解析時(shí),DOMContentLoaded 事件會(huì)被觸發(fā),它不會(huì)等待樣式表,圖片或者子框架完成加載
CSS 加載會(huì)阻塞其后的 JS 執(zhí)行
由瀏覽器的渲染流程圖可知,JS 的加載、解析與執(zhí)行會(huì)阻塞 DOM 的構(gòu)建,也就是說,在構(gòu)建 DOM 時(shí),HTML 解析器若遇到了 JS,那么它會(huì)暫停構(gòu)建 DOM ,將控制權(quán)移交給JS引擎,等 JS 引擎運(yùn)行完畢,瀏覽器再從中斷的地方恢復(fù) DOM 構(gòu)建。
這也是建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因。
由瀏覽器的渲染流程圖可知,DOM 和 CSSOM 的構(gòu)建是互不影響,但如果在 JS 腳本前引入外部 CSS 文件喃?
<html>
<head>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<div>hello world</div>
<script>
console.log('hello world')
</script>
<div>hello world</div>
</body>
</html>
它的執(zhí)行流程:
此時(shí) CSS 也阻塞 DOM 的生成
這是因?yàn)?JS 不只是可以改 DOM ,它還可以更改樣式,也就是它可以更改 CSSOM 。而不完整的 CSSOM 是無法使用的, JS 中想訪問 CSSOM 并更改它,那么在執(zhí)行 JS 時(shí),必須要能拿到完整的CSSOM。
所以就導(dǎo)致了一個(gè)現(xiàn)象,如果瀏覽器尚未完成 CSSOM 的下載和構(gòu)建,而我們卻想在此時(shí)運(yùn)行腳本,那么瀏覽器將延遲腳本執(zhí)行和 DOM 構(gòu)建,直至其完成 CSSOM 的下載和構(gòu)建。也就是說,在這種情況下,瀏覽器會(huì)先下載和構(gòu)建 CSSOM ,然后再執(zhí)行JS腳本,最后在繼續(xù)構(gòu)建 DOM 。
如果也有 JS 加載喃?
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
var p = document.querySelector('p')
console.log(p)
})
</script>
<link rel="stylesheet" href="./static/style.css?sleep=3000">
<script src="./static/index.js"></script>
</head>
<body>
<p>hello world</p>
</body>
HTML 文件中包含了 CSS 的外部引用和 JS 外部文件,HTML 同時(shí)發(fā)起這兩個(gè)文件的下載請求,不管 CSS 文件和 JS 文件誰先到達(dá),都要先等到 CSS 文件下載完成并生成 CSSOM,然后再執(zhí)行 JavaScript 腳本,最后再繼續(xù)構(gòu)建 DOM,構(gòu)建布局樹,繪制頁面。
所以一般將 <script>
放在 <link>
標(biāo)簽前面
如何優(yōu)化渲染流程
即如何減少白屏?xí)r間?
- 使用內(nèi)聯(lián) JS、CSS ,減少 JS 、 CSS 文件的下載
- webpack 等工具對 JS、CSS 文件壓縮,減少文件大小
- 使用 async 或者 defer
- 使用 CDN 等