總覽
瀏覽器在轉譯網頁前，必須先剖析 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 的外部要求，讓瀏覽器加快首次轉譯的時間。不過請注意，內嵌也會增加 HTML 文件的大小，而相同的指令碼內容可能需要內嵌至多個頁面。因此，建議您只內嵌小型指令碼，以獲得最佳成效。
將 JavaScript 設為非同步
根據預設，JavaScript 會封鎖 DOM 建立作業，因此會延遲首次轉譯的時間。如要防止 JavaScript 封鎖剖析器，建議您在外部指令碼上使用 HTMLasync 屬性。例如：
<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。
意見回饋
本頁內容對你是否有幫助？