含有外部 css 文件的渲染流水線

上圖中，請求 HTML 數(shù)據(jù)和構(gòu)建 DOM 中間有一段空閑時(shí)間，這段時(shí)間可能成為頁面渲染的瓶頸。DOM 構(gòu)建結(jié)束后，css 文件還未下載完成這段時(shí)間內(nèi)，渲染流水線一直在等待，因?yàn)橄乱徊绞呛铣刹季謽洹：铣刹季謽湫枰?CSSOM 和 DOM，所以需要等待 CSS 加載結(jié)束并解析為 CSSOM。這種情況下，CSS 沒有阻塞 DOM 的生成。

CSSOM 的作用

• 提供給 JS 操作樣式表的能力
• 為布局樹合成提供基礎(chǔ)的樣式信息

含有內(nèi)聯(lián) JS 和 外部 CSS 頁面的渲染流水線

從上圖中可以看到，構(gòu)建 DOM 過程中遇到 JS 會(huì)停止構(gòu)建，去解析執(zhí)行 JS，因?yàn)?JS 可能會(huì)修改當(dāng)前 DOM。

在執(zhí)行 JS 腳本之前，若頁面中包含外部 css 或內(nèi)聯(lián)的 css，渲染引擎需要將他們提前轉(zhuǎn)為 CSSOM，因?yàn)?JS 有修改 CSSOM 的能力，所以在 JS 執(zhí)行前，還要依賴 CSSOM。 這意味著 CSS 在部分情況下也會(huì)阻塞 DOM 生成。

含有外部 JS 和 CSS 頁面的渲染流水線

請求到的 HTML 數(shù)據(jù)在預(yù)解析過程中，檢測到有外部 JS、CSS 文件需要下載，同時(shí)發(fā)起兩個(gè)文件的下載請求，下載時(shí)間不是重疊的，是按照最久的那個(gè)來算。

不管 CSS，JS 誰先到達(dá)，都要先等到 CSS 文件下載并生成 CSSOM，然后執(zhí)行 JS 腳本，最后構(gòu)建 DOM、布局樹、繪制頁面。

影響頁面展示因素及優(yōu)化策略

從輸入 URL 到頁面首次展示的三階段：

1. 請求發(fā)出去后，到提交數(shù)據(jù)階段，此時(shí)頁面展示的還是之前頁面的內(nèi)容。
2. 提交數(shù)據(jù)后，渲染進(jìn)程會(huì)創(chuàng)建一個(gè)空白頁面，這段時(shí)間稱為 解析白屏 ，等待 CSS 和 JS 文件的加載完成，生成 CSSOM 和 DOM，然后合成布局樹、XXX 等步驟準(zhǔn)備首次渲染。
3. 首次渲染完成后，就開始進(jìn)入完整頁面的生成階段，頁面會(huì)一點(diǎn)點(diǎn)被繪制出來。

最影響用戶體驗(yàn)的就是第二階段，包括解析 HTML、下載 CSS、下載 JavaScript、生成布局樹、繪制頁面等操作。

優(yōu)化策略

1. 內(nèi)聯(lián) CSS、JS，等到 HTML 下載好后便可直接開始渲染。
2. 盡量減少文件大小，webpack 移除注釋、壓縮文件。
3. 將一些不需要在解析 HTML 階段使用的 JS 標(biāo)上 async 或 defer。
4. 對(duì)于大的 CSS 文件，可以通過媒體查詢，將其拆分為不同用途的 CSS 文件，只在特定場景下加載。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。