在網頁開發中，「禁止轉譯資源」（Render-Blocking Resources）指的是在網頁渲染過程中，必須先完全下載並解析這些資源，瀏覽器才會繼續處理和顯示網頁內容。這些資源通常包括 CSS 和 JavaScript 文件。

禁止轉譯資源 (Render-Blocking Resources) 是什麼？

當瀏覽器加載一個網頁時，它會按照以下步驟進行渲染：

1. HTML 解析：
   • 瀏覽器首先下載 HTML 文件並開始解析。
2. CSS 解析：
   • 當瀏覽器遇到 <link> 標籤引用的外部 CSS 文件時，它會暫停解析 HTML，去下載和解析 CSS。只有在所有 CSS 被下載並解析後，瀏覽器才會繼續解析 HTML。
3. JavaScript 解析：
   • 當瀏覽器遇到 <script> 標籤時，如果標籤不帶有 async 或 defer 屬性，瀏覽器會停止解析 HTML，下載並執行 JavaScript。

這些步驟中的 CSS 和 JavaScript 文件就是所謂的「禁止轉譯資源」，因為它們會暫停或阻止 HTML 解析和網頁內容的渲染，直到這些資源被完全下載和解析。這樣的設計是為了確保在頁面顯示之前，所有需要的樣式和腳本都已經準備好，避免顯示混亂或行為異常。

為什麼 CSS 是禁止轉譯的資源？

CSS 是禁止轉譯的資源，因為瀏覽器需要先確定所有的樣式規則，才能準確地渲染網頁的佈局和設計。若 CSS 沒有完全加載，瀏覽器無法正確計算頁面元素的大小、位置和樣式，這會導致用戶體驗不佳。

如何減少禁止轉譯資源對網頁性能的影響？

1. 最小化和合併 CSS 文件：

   • 將多個 CSS 文件合併成一個，並進行最小化，以減少 HTTP 請求數量和文件大小。

2. 使用媒體屬性：

   • 將不影響初始頁面渲染的 CSS 文件加上媒體屬性（如 media="print"），使其僅在特定情況下加載。

   <link rel="stylesheet" href="print.css" media="print"
   

3. 內聯關鍵 CSS：

   • 將關鍵的 CSS 直接內聯到 HTML 文件中，確保頁面可以快速渲染，而非關鍵的 CSS 可以在頁面加載後再加載。

   <style>
     /* 關鍵 CSS 內聯 */
     body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
     }
   </style>
   

4. 異步加載非關鍵 CSS：

   • 使用 JavaScript 異步加載非關鍵的 CSS 文件。

   
   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

總結

「禁止轉譯資源」是指那些必須在網頁渲染前完全加載和解析的資源，通常包括 CSS 和 JavaScript 文件。這些資源會影響頁面的加載速度和用戶體驗。通過優化這些資源的加載方式，可以顯著提高網頁的性能和用戶體驗。