什麼情況下會出現css阻塞？

王铁柱6發表於2024-12-09
CSS

CSS阻塞指的是瀏覽器在渲染頁面時，為了避免出現內容閃現（Flash of Unstyled Content，簡稱FOUC），會等待CSS檔案下載和解析完成後，才會渲染頁面內容。這會導致頁面在CSS載入完成之前呈現空白或無樣式狀態。

出現CSS阻塞主要有以下幾種情況：

  • 外部樣式表: 當使用<link>標籤引入外部CSS檔案時，瀏覽器會先下載並解析CSS檔案，然後再渲染頁面。如果CSS檔案較大或網路較慢，就會導致明顯的阻塞。尤其當CSS檔案放在<head>標籤中，阻塞會更加明顯，因為瀏覽器需要先解析完CSS才能渲染頁面後續內容。

  • 內聯樣式: <style>標籤內的CSS樣式也會阻塞渲染。雖然內聯樣式比外部樣式表載入更快，但如果樣式表過大或過於複雜，仍然會造成阻塞。

  • @import規則: 使用@import規則匯入CSS檔案也會阻塞渲染。@import規則會先下載並解析當前的CSS檔案，然後再下載並解析@import匯入的CSS檔案，這會導致更長的阻塞時間，因此不推薦使用@import。

總而言之，任何需要下載和解析的CSS都會阻塞渲染。為了減少CSS阻塞對頁面載入速度的影響，可以採取以下最佳化策略：

  • CSS最佳化: 壓縮CSS檔案大小，減少不必要的樣式規則，合併多個CSS檔案。

  • 關鍵CSS: 將首屏渲染所需的CSS內聯到<head>標籤中的<style>標籤內，從而優先渲染首屏內容，避免使用者長時間看到空白頁面。其餘的CSS可以使用非同步載入的方式載入。

  • 非同步載入CSS: 使用JavaScript非同步載入CSS檔案，例如：

    const link = document.createElement('link');
link.href = 'style.css';
link.rel = 'stylesheet';
document.head.appendChild(link);

    或者使用media屬性：

    <link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="style.css" media="all">

    瀏覽器只會下載media屬性匹配當前媒體型別的CSS檔案。例如，print.css只會在列印頁面時下載。初始載入時，media="all"的樣式表會阻塞渲染，而其他媒體型別的樣式表將非同步載入。 利用media屬性，可以先載入關鍵CSS，再非同步載入其他CSS。例如，先用media="screen"載入首屏樣式，然後用media="all"載入完整樣式。

  • 使用CSS預載入: 使用<link rel="preload" href="style.css" as="style">告訴瀏覽器儘早載入CSS檔案，但不會阻塞渲染。

透過以上最佳化策略，可以最大程度地減少CSS阻塞，提高頁面載入速度，提升使用者體驗。

相關文章