CSS載入會阻塞DOM樹的構建，但不會阻塞DOM樹的解析。 關鍵區別在於“構建”和“解析”。
-
解析: 瀏覽器解析HTML文件，將HTML程式碼轉換為DOM樹。這一步是將HTML程式碼轉換成瀏覽器可以理解的樹形結構。
-
構建: 瀏覽器構建渲染樹（Render Tree）。渲染樹包含了頁面上所有可見元素的佈局和樣式資訊。
CSS載入會阻塞渲染樹的構建，因為瀏覽器需要知道每個元素的樣式才能構建渲染樹。如果CSS檔案很大或者網路連線緩慢，那麼渲染樹的構建就會被延遲，從而導致頁面顯示空白。
更詳細的解釋：
- 瀏覽器解析HTML文件，生成DOM樹。
- 瀏覽器解析CSS檔案，生成CSSOM（CSS Object Model）。
- 瀏覽器將DOM樹和CSSOM合併，生成渲染樹。
- 瀏覽器根據渲染樹進行佈局（Layout），計算每個元素的位置和大小。
- 瀏覽器將佈局後的渲染樹繪製到螢幕上（Paint）。
因為渲染樹依賴於DOM樹和CSSOM，所以CSS載入會阻塞渲染樹的構建。但是，DOM樹的解析和CSS的下載是可以並行的。瀏覽器會先解析HTML文件，然後在解析過程中遇到link標籤引用CSS檔案時，會非同步下載CSS檔案。 即使CSS檔案還沒有下載完成，瀏覽器仍然會繼續解析HTML文件，構建DOM樹。
所以，準確的說是CSS的載入會阻塞渲染樹的構建，進而影響到頁面的首次渲染，讓使用者感覺頁面載入慢。 為了最佳化頁面載入速度，通常建議：
- 將CSS放在head標籤內: 這樣瀏覽器可以儘早下載CSS檔案，減少阻塞時間。
- 使用CSS媒體查詢: 可以使用媒體查詢將不同裝置的CSS分開載入，避免載入不必要的CSS。
- 最佳化CSS檔案大小: 減小CSS檔案大小可以加快下載速度。
- 使用關鍵CSS (Critical CSS): 將首屏渲染所需的CSS內聯到HTML中，可以加快首屏渲染速度。
總而言之，CSS載入不會阻塞DOM樹的解析，但會阻塞渲染樹的構建，從而影響頁面的首次渲染速度。