CSS 真的會阻塞文檔解析嗎？從瀏覽器渲染原理深入探究一下詳情 - 前端,javascript,瀏覽器原理,瀏覽器,css 銀之夏雪動態日志

在網頁開發領域，一個常見的疑問是 CSS 是否會阻塞文檔解析。理解這一問題對於優化網頁性能、提升用户體驗至關重要。要深入解答這個問題，需要從瀏覽器渲染網頁的原理説起。

瀏覽器渲染網頁的基本流程

瀏覽器在接收到 HTML 文檔後，會依次進行以下幾個主要步驟：

解析 HTML：瀏覽器從網絡或本地獲取 HTML 文件，然後開始解析，將 HTML 代碼轉換為 DOM（Document Object Model，文檔對象模型）樹。DOM 樹是 HTML 文檔的樹形表示，它以節點的形式描述了頁面的結構，比如標籤之間的層級關係等。
構建 CSSOM：同時，瀏覽器會解析 CSS 代碼，無論是內部樣式表、外部樣式表還是內聯樣式，都會被解析並構建成 CSSOM（CSS Object Model，CSS 對象模型）樹。CSSOM 樹描述了頁面元素的樣式信息，用於後續計算元素的最終樣式。
合成渲染樹：DOM 樹和 CSSOM 樹構建完成後，瀏覽器將兩者結合，根據 DOM 中元素的結構和 CSSOM 中定義的樣式，生成渲染樹（Render Tree）。渲染樹只包含那些需要顯示在頁面上的元素及其樣式信息，例如<script>標籤、<meta>標籤等不影響頁面顯示的元素不會出現在渲染樹中。
佈局計算：在渲染樹生成後，瀏覽器需要計算每個元素在頁面上的位置和大小，這一過程稱為佈局計算。它會根據渲染樹中元素的樣式和頁面的尺寸等因素，確定每個元素的幾何屬性。
繪製：最後，瀏覽器根據佈局計算的結果，將頁面元素繪製到屏幕上，完成網頁的顯示。

CSS 與文檔解析的關係

從上述流程可以看出，CSS 本身並不直接阻塞 HTML 文檔的解析。也就是説，瀏覽器在下載 HTML 文檔的過程中，會一邊下載一邊解析，不會因為等待 CSS 的加載而暫停 HTML 的解析。然而，在實際情況中，CSS 確實可能導致文檔解析的延遲，這主要與 JavaScript 腳本的執行以及渲染樹的構建有關。

JavaScript 腳本執行的影響

由於 JavaScript 腳本可以操作 DOM 和 CSSOM，當瀏覽器在解析 HTML 過程中遇到<script>標籤時，會暫停 HTML 文檔的解析，優先執行 JavaScript 腳本。而在 JavaScript 腳本執行時，有可能會請求頁面元素的樣式信息。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div id="myDiv">這是一個測試div</div>
    <script>
        const div = document.getElementById('myDiv');
        // 獲取div的樣式屬性，比如寬度
        const width = window.getComputedStyle(div).width; 
        console.log(width);
    </script>
</body>

</html>

在這個例子中，如果styles.css還沒有完成下載和解析，當 JavaScript 腳本執行到獲取元素樣式的代碼時，由於此時 CSSOM 尚未構建完成，獲取到的樣式值可能是錯誤的。為了避免這種情況，瀏覽器會延遲 JavaScript 腳本的執行以及 HTML 文檔的解析，直到 CSSOM 構建完成。

渲染樹構建的要求

渲染樹的構建依賴於 DOM 樹和 CSSOM 樹。如果 CSS 還在加載或解析過程中，那麼 CSSOM 樹就不完整，此時無法準確構建渲染樹。例如，假設一個網頁中有大量複雜的 CSS 規則來定義元素的顯示和隱藏、定位等樣式，如果這些 CSS 沒有加載完畢，瀏覽器無法確定哪些元素應該顯示在頁面上，也就無法正確構建渲染樹。因此，在這種情況下，瀏覽器也會等待 CSS 的加載和解析，這間接導致了 HTML 文檔解析的阻塞。

先加載 JavaScript 後加載 CSS 的問題及影響

若先加載 JavaScript 後加載 CSS，會引發一系列問題。

首先是頁面閃爍，JavaScript 代碼可能會操作 DOM，例如修改元素的顯示、隱藏狀態或樣式等。由於 CSS 尚未加載，頁面初始會以默認樣式呈現，當 JavaScript 執行完相關操作後，CSS 才加載完成並應用樣式，這就可能導致頁面元素在短時間內從默認樣式切換到最終樣式，產生閃爍現象。比如一個圖片元素原本在 JavaScript 中被設置為display:none，但 CSS 中又定義了其正常顯示且有特定樣式，用户可能會先看到圖片消失，然後又突然出現並帶有樣式，影響視覺體驗。

其次，腳本執行可能出現異常。JavaScript 腳本可能會依賴 CSS 樣式來獲取準確的元素尺寸、位置等信息進行操作。如果 CSS 未加載完成，那麼getComputedStyle等獲取樣式的方法返回的值可能不準確。例如，在一個輪播圖的 JavaScript 代碼中，需要根據圖片的寬度來計算切換動畫的距離，若 CSS 未加載，獲取的圖片寬度可能是錯誤的，導致輪播圖動畫效果異常。

再者，渲染性能會下降。瀏覽器在渲染頁面時，需要結合 DOM 和 CSSOM 構建渲染樹。若先加載 JavaScript，而 JavaScript 又可能對 DOM 進行大量修改，之後 CSS 加載完成再應用樣式，瀏覽器可能需要多次重新計算佈局和重新渲染，增加了渲染的複雜性和時間成本，降低了渲染性能。

此外，當 JavaScript 修改 CSS 時，也存在潛在風險。惡意的 JavaScript 代碼若被注入網頁，就可能篡改 CSS 樣式，破壞頁面的佈局和視覺效果。例如，將原本用於隱藏敏感信息的 CSS 樣式修改為顯示，從而導致信息泄露；或者惡意改變頁面的字體、顏色、排版等，影響用户對頁面內容的正常理解和使用。即便 CSS 已加載完成，JavaScript 操作 CSS 仍可能引發新問題。大量頻繁的 JavaScript - CSS 操作，如在循環中不斷修改元素的 CSS 屬性，會導致瀏覽器頻繁重新計算佈局和重新繪製，嚴重影響頁面性能。例如，通過 JavaScript 循環快速改變一個列表中所有項的背景顏色，頁面會出現明顯卡頓。而且，JavaScript 代碼邏輯錯誤也可能導致 CSS 樣式被錯誤修改。比如，錯誤地選擇了元素，將原本應用於導航欄的樣式錯誤地應用到了內容區域，破壞頁面的視覺呈現。

解決辦法

針對先加載 JavaScript 後加載 CSS 出現的問題，以及 JavaScript 修改 CSS 帶來的潛在風險，有以下解決辦法。
對於非關鍵的 JavaScript 腳本，可以使用async屬性。<script async src="script.js"></script>，async會讓瀏覽器在下載完腳本後立即執行，不會阻塞頁面的解析和其他資源的加載，這樣可以在一定程度上減少 JavaScript 對 CSS 加載的影響。
而對於需要按順序執行且不會阻塞頁面渲染的腳本，使用defer屬性，<script defer src="script.js"></script>，defer會使腳本在 HTML 解析完成後、DOMContentLoaded 事件觸發前執行，確保在 CSS 加載完成後再執行腳本，避免腳本執行時因 CSS 未加載而獲取錯誤樣式信息。

另外，將關鍵的 CSS 樣式直接寫在 HTML 文件的style標籤內，這樣瀏覽器在解析 HTML 時就能立即應用這些樣式，減少頁面閃爍的可能性。

例如，對於頁面的基本佈局樣式、字體樣式等關鍵部分進行內聯，保證頁面初始顯示的基本樣式正確，後續再加載外部 CSS 文件來補充完整樣式。

同時，在 JavaScript 代碼中，避免在 CSS 未加載完成時就進行依賴樣式的操作。可以通過監聽DOMContentLoaded事件，確保 DOM 和 CSSOM 都已準備好後再執行相關邏輯。

例如：

document.addEventListener('DOMContentLoaded', function() {
    // 這裏寫依賴樣式的JavaScript代碼
});

實際案例分析

以一個電商網站的產品詳情頁為例。該頁面包含豐富的產品圖片、描述文字、價格信息以及購買按鈕等元素，同時有大量的 CSS 代碼用於控制頁面的佈局和樣式，比如設置圖片的尺寸和排列方式、文字的字體和顏色、按鈕的樣式和交互效果等。

當用户訪問該頁面時，瀏覽器開始下載 HTML 文檔。在解析 HTML 過程中，遇到了外部 CSS 文件的鏈接，於是同時開始下載 CSS 文件。然而，由於 CSS 文件較大，包含了許多針對不同屏幕尺寸的響應式樣式以及複雜的動畫效果樣式，下載和解析時間較長。

在 HTML 文檔中，還包含一些用於實現交互功能的 JavaScript 代碼，比如當用户點擊某個產品特性標籤時，顯示或隱藏相關的詳細説明。這些 JavaScript 代碼在執行時，需要獲取頁面元素的當前樣式來進行相應的操作。例如，判斷某個元素是否已經應用了特定的隱藏樣式，從而決定是顯示還是隱藏該元素。

由於 CSS 文件尚未完成下載和解析，CSSOM 樹不完整，JavaScript 無法獲取到準確的樣式信息。為了保證 JavaScript 能夠正確執行，瀏覽器會暫停 HTML 文檔的解析，等待 CSSOM 構建完成。這就導致了整個頁面的渲染延遲，用户可能會看到頁面長時間處於空白或部分加載的狀態，影響了用户體驗。

綜上所述，雖然 CSS 本身並不直接阻塞 HTML 文檔的解析，但在與 JavaScript 腳本執行以及渲染樹構建相關的情況下，CSS 的加載和解析過程可能會導致文檔解析的延遲。同時，先加載 JavaScript 後加載 CSS 會帶來諸多問題，JavaScript 對 CSS 的修改也存在潛在風險。網頁開發者在優化頁面性能時，需要充分考慮這些因素，例如合理優化 CSS 代碼，減少其體積和複雜度，採用異步加載 CSS 的方式，以及合理安排 JavaScript 代碼的執行順序等，以確保頁面能夠快速、流暢地渲染，同時保障網頁的安全性和穩定性。

技術交流溝通歡迎➕V：yinzhixiaxue