在解析DOM的過程中，如果遇到了javascript指令碼，那麼需要先暫停DOM解析去執行javascript，因為JavaScript有可能會修改當前狀態下的DOM.

不過在執行JavaScript指令碼之前，如果頁面中包含了外部CSS檔案的引用，或者通過style標籤內建了CSS內容，那麼渲染引擎還需要將這些內容轉換為CSSOM，因為JavaScript有修改CSSOM的能力，所以在執行JavaScript之前，還需要依賴CSSOM。也就是說CSS在部分情況下也會阻塞DOM的生成。

渲染流水線：CSS檔案下載完成並生成CSSOM => 執行JavaScript指令碼 => 繼續構建DOM => 構建佈局樹 => 繪製頁面

從發起URL請求開始，到首次顯示頁面的內容，在視覺上會經歷三個階段：

• 第一階段，等請求發出去之後，到提交資料階段，這時頁面展示出來的還是之前頁面的內容
• 第二階段，提交資料之後渲染程序會建立一個空白頁面，我們通常把這段時間稱為解析白屏，並等待CSS檔案和JavaScript檔案的載入完成，生成CSSOM和DOM，然後合成佈局樹，最後還要經過一系列的步驟準備首次渲染。
• 第三階段，等首次渲染完成之後，就開始進入完整頁面的生成階段，然後頁面會一點點被繪製出來。

針對第二階段，這個階段的主要問題是白屏時間，如果白屏時間過久，就會影響到使用者體驗，為了縮短白屏時間，我們來挨個分析這個階段的主要任務，包括瞭解析HTML、下載CSS、下載JavaScript、生成CSSOM、執行JavaScript、生成佈局樹、繪製頁面一系列操作

通常情況下的瓶頸主要體現在下載CSS檔案、下載JavaScript檔案和執行JavaScript。

所以想縮短白屏時間，可以有以下策略：

• 通過內聯JavaScript、內聯CSS來移出這兩種型別的檔案下載，這樣獲取到HTML檔案之後就可以直接開始渲染流程了。
• 但並不是所有的場合都適合內聯，那麼還可以儘量減少檔案大小，比如通過webpack等工具移除一些不必要的註釋，並壓縮JavaScript檔案。
• 還可以將一些不需要在解析HTML階段使用的JavaScript標記上sync或者defer。
• 對於大的CSS檔案，可以通過媒體查詢屬性，將其拆分為多個不同用途的CSS檔案，這樣只有在特定的場景下才會載入特定的CSS檔案。