網站的加載速度對用戶體驗至關重要，CSS 是頁面樣式的核心，它的加載時間會直接影響網頁的渲染速度。CSS 阻塞加載就是指在 HTML 渲染的過程中，當遇到 CSS 的鏈接時，瀏覽器為了保證 CSS 的正確性，會暫停渲染，直到 CSS 文件下載并解析完成。這也是 CSS 加載優化時需要考慮的一個問題。

在實際應用中，CSS 阻塞加載會導致首屏渲染時出現 FOUC（文檔樣式閃爍），用戶體驗很不好。為了避免這種情況的發生，我們需要對 CSS 加載進行優化。一種解決方案是將所有 CSS 代碼內聯到 HTML 中，避免網絡請求，但這會增加 HTML 的體積，不利于維護。最好的方法是使用異步加載或延遲加載，這樣 CSS 不會阻塞 HTML 的渲染，提升網頁的加載速度。

CSS 阻塞加載還存在一種情況，就是當我們通過 JavaScript 動態生成了新的元素并且在元素中使用 CSS 樣式時，瀏覽器為了保證樣式的正確性，會先加載 CSS 文件再渲染這個元素。這會增加頁面的加載時間并且降低用戶體驗。為了避免這種情況的發生，我們可以直接通過 JS 對元素進行樣式的 inline 定義，或者在 JS 中預先加載 CSS 文件。

const css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'style.css';
const script = document.createElement('script');
script.src = 'script.js'
script.onload = function () {
document.body.appendChild(div);
}
document.head.appendChild(css);
document.head.appendChild(script);

在實際開發中，我們需要通過各種手段綜合考慮來優化 CSS 加載，以達到更好的用戶體驗和更快的網頁加載速度。