CSS 如何影響首次加載時的白屏時間？

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

上圖中，請求 HTML 數據和構建 DOM 中間有一段空閒時間，這段時間可能成爲頁面渲染的瓶頸。 DOM 構建結束後，css 文件還未下載完成這段時間內，渲染流水線一直在等待，由於下一步是合成佈局樹。合成佈局樹須要 CSSOM 和 DOM，因此須要等待 CSS 加載結束並解析爲 CSSOM。 這種狀況下，CSS 沒有阻塞 DOM 的生成。

• CSSOM 的做用

1. 提供給 JS 操做樣式表的能力
2. 爲佈局樹合成提供基礎的樣式信息

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

從上圖中能夠看到，構建 DOM 過程當中遇到 JS 會中止構建，去解析執行 JS，由於 JS 可能會修改當前 DOM。

在執行 JS 腳本以前，若頁面中包含外部 css 或內聯的 css，渲染引擎須要將他們提早轉爲 CSSOM，由於 JS 有修改 CSSOM 的能力，因此在 JS 執行前，還要依賴 CSSOM。這意味着 CSS 在部分狀況下也會阻塞 DOM 生成。

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

請求到的 HTML 數據在預解析過程當中，檢測到有外部 JS、CSS 文件須要下載，同時發起兩個文件的下載請求，下載時間不是重疊的，是按照最久的那個來算。

無論 CSS，JS 誰先到達，都要先等到 CSS 文件下載並生成 CSSOM，而後執行 JS 腳本，最後構建 DOM、佈局樹、繪製頁面。

影響頁面展現因素及優化策略

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

1. 請求發出去後，到提交數據階段，此時頁面展現的仍是以前頁面的內容。

2. 提交數據後，渲染進程會建立一個空白頁面，這段時間稱爲解析白屏，等待 CSS 和 JS 文件的加載完成，生成 CSSOM 和 DOM，而後合成佈局樹、XXX 等步驟準備首次渲染。

3. 首次渲染完成後，就開始進入完整頁面的生成階段，頁面會一點點被繪製出來。

最影響用戶體驗的就是第二階段，包括解析 HTML、下載 CSS、下載 JavaScript、生成佈局樹、繪製頁面等操做。

優化策略

1. 內聯 CSS、JS，等到 HTML 下載好後即可直接開始渲染。
2. 儘可能減小文件大小，webpack 移除註釋、壓縮文件。
3. 將一些不須要在解析 HTML 階段使用的 JS 標上 async 或 defer。
4. 對於大的 CSS 文件，能夠經過媒體查詢，將其拆分爲不一樣用途的 CSS 文件，只在特定場景下加載。

參考資料

瀏覽器工做原理與實踐