移除禁止轉譯的 JavaScript

，瞭解如何調查及移除這項存取權。 當 PageSpeed Insights 偵測到 HTML 參照封鎖設定時，就會觸發這項規則 放在網頁上不需捲動位置的部分

總覽

瀏覽器必須先剖析 HTML 標記，才能轉譯 DOM 樹狀結構。 在這個過程中，每當剖析器遇到指令碼時，必須停止並執行該指令碼 才能繼續剖析 HTML。如果是外部指令碼，則剖析器也 不得等待資源下載完成，這可能導致一或多項網路往返作業。 會延遲初次轉譯網頁所需的時間。 詳情請參閱 新增「互動性」與 JavaScript，進一步瞭解 JavaScript 如何影響 轉譯路徑

建議

您應該避免和盡量少用封鎖 JavaScript，特別是會使 必須先擷取才能執行作業。轉譯網頁內容所需的指令碼 並避免額外的網路要求，不過內嵌的內容必須較小 而且必須快速執行才能帶來良好成效對初始而言不重要的指令碼 應以非同步或延遲的方式進行，直到第一次轉譯之後。注意事項 為了改善載入時間，您也必須 最佳化 CSS 放送。

內嵌 JavaScript

外部封鎖指令碼會強制瀏覽器等待 JavaScript 擷取完成， 這些呼叫可能會在轉譯網頁之前，增加一或多個網路來回行程。如果外部 指令碼很小，您可以直接將內容內嵌至 HTML 文件中，避免 網路要求延遲時間舉例來說，如果 HTML 文件的內容如下： 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
資源 small.js 則如下所示： 
  /* contents of a small JavaScript file */
您即可按照下列方式內嵌指令碼： 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
內嵌指令碼內容會消除 small.js 的外部要求，並允許 初次顯示網頁的速度更快不過請注意，內嵌增加時 而相同的指令碼內容可能必須內嵌在 有多個網頁因此，為獲得最佳成效，建議您只內嵌小型指令碼。

將 JavaScript 設為非同步

根據預設，JavaScript 會封鎖 DOM 建構，因此會延遲初次顯示。目的地： 建議您使用 HTML async，避免 JavaScript 封鎖剖析器 屬性。例如： 
<script async src="my.js">
請參閱 剖析器封鎖與非同步 JavaScript：進一步瞭解非同步指令碼。 請注意，非同步指令碼不保證按指定順序執行，也不應該使用 document.write。視執行順序或需要存取或修改的指令碼 為了因應這些限制，可能需要重新撰寫網頁的 DOM 或 CSSOM。

延後載入 JavaScript

可能不是網頁初始轉譯所需的指令碼載入和執行， 延後到初始轉譯或其他網頁重要部分完成為止 載入中。這有助於減少資源爭用情形，並提高效能。

常見問題

如果使用 JQuery 這樣的 JavaScript 程式庫，該怎麼做？
許多 JavaScript 程式庫 (例如 JQuery) 都可用來強化網頁新增了 增添互動性、動畫和其他效果不過，其中許多 等不需捲動位置內容轉譯後，就可以安全地新增行為。 調查是否將這類 JavaScript 設為非同步或延後載入。
如果使用 JavaScript 架構建立網頁，該怎麼做？
如果網頁內容是由用戶端 JavaScript 建構， 則應該調查內嵌相關的 JavaScript 模組，避免多餘的 網路往返次數。同樣地，善用伺服器端轉譯功能 改善第一次網頁載入的效能：在伺服器上轉譯 JavaScript 範本以提供 速度更快，等網頁載入後再使用用戶端範本如要 進一步瞭解伺服器端轉譯作業，請參閱 http://youtu.be/VKTWdaupft0?t=14m28s.

意見回饋

本頁內容是否有幫助？