CSS 的載入會阻塞 DOM 樹的渲染，但不會阻塞 DOM 樹的解析。
原因如下：
-
DOM 樹的解析和 CSS 的載入是並行的： 瀏覽器會先下載 HTML 檔案，並開始解析構建 DOM 樹。與此同時，如果遇到 link 標籤引入的 CSS 檔案，瀏覽器也會並行下載 CSS 檔案。
-
渲染需要 DOM 樹和 CSSOM 樹： 瀏覽器渲染頁面需要兩棵樹：DOM 樹（表示 HTML 的結構）和 CSSOM 樹（表示 CSS 的樣式規則）。只有當這兩棵樹都構建完成，瀏覽器才能將它們合併成渲染樹（Render Tree），然後進行佈局和繪製。
-
CSS 會阻塞渲染樹的構建： 因為渲染樹依賴於 DOM 樹和 CSSOM 樹，所以如果 CSSOM 樹的構建還沒有完成，渲染樹也就無法構建，瀏覽器也就無法渲染頁面。這就是 CSS 阻塞渲染的原因。 瀏覽器需要知道所有樣式規則才能準確地計算出每個元素的樣式，包括大小、位置、顏色等等。如果在 CSS 下載和解析完成之前就開始渲染，那麼當 CSS 載入完成後，元素的樣式可能會發生變化，導致瀏覽器需要重新計算佈局和繪製，這會造成迴流和重繪，影響效能，使用者體驗也會變差（例如，頁面會發生閃爍）。
-
CSS 不會阻塞 DOM 樹的解析： 瀏覽器可以逐步解析 DOM 樹，即使 CSS 檔案還沒有下載完成。這是因為解析 DOM 樹並不依賴於 CSS 樣式。
總結:
CSS 載入會阻塞渲染，是為了避免頁面閃爍和重繪，保證渲染的準確性。它不會阻塞 DOM 的解析，瀏覽器會並行處理 HTML 和 CSS 的下載和解析。
為了最佳化頁面載入效能，可以考慮以下策略：
- 使用
<link rel="preload">預載入關鍵 CSS： 告訴瀏覽器儘早載入關鍵 CSS 檔案。 - 將 CSS 放在
<head>標籤中： 儘早載入 CSS，雖然會阻塞渲染，但可以避免出現“白屏時間”過長的情況。 - 最佳化 CSS 檔案大小： 減小 CSS 檔案大小可以加快下載速度。
- 使用媒體查詢： 將不必要的 CSS 規則放到媒體查詢中，避免載入不必要的樣式。
- 關鍵 CSS 內聯： 將關鍵的 CSS 樣式內聯到 HTML 中，可以加快首次渲染速度。
希望這個解釋能夠解答你的疑惑。