本頁面由 Cloud Translation API 翻譯而成。

利用 JavaScript 增加互動

Ilya Grigorik

發布日期：2013 年 12 月 31 日

我們可以使用 JavaScript 修改網頁的各個層面，包括內容、樣式，以及對使用者互動的回應。不過，JavaScript 也可能會阻斷 DOM 建構作業，並延遲網頁轉譯作業。為提供最佳效能，請讓 JavaScript 為非同步，並從關鍵算繪路徑中移除任何不必要的 JavaScript。

摘要

JavaScript 可查詢及修改 DOM 和 CSSOM。
CSSOM 上的 JavaScript 執行區塊。
除非明確宣告為非同步，否則 JavaScript 會封鎖 DOM 建構作業。

JavaScript 是一種在瀏覽器中執行的動態語言，可讓我們變更網頁行為的各個層面：我們可以透過在 DOM 樹狀結構中新增及移除元素來修改內容；修改各個元素的 CSSOM 屬性；處理使用者輸入內容等等。為說明這一點，請參考以下情況：當先前的「Hello World」範例變更為內嵌簡短指令碼時，會發生什麼事：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path: Script</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
    <script>
      var span = document.getElementsByTagName('span')[0];
      span.textContent = 'interactive'; // change DOM text content
      span.style.display = 'inline'; // change CSSOM property
      // create a new element, style it, and append it to the DOM
      var loadTime = document.createElement('div');
      loadTime.textContent = 'You loaded this page on: ' + new Date();
      loadTime.style.color = 'blue';
      document.body.appendChild(loadTime);
    </script>
  </body>
</html>

試用

JavaScript 可讓我們存取 DOM，並提取隱藏的 span 節點參照；雖然節點可能不會顯示在轉譯樹狀結構中，但仍會保留在 DOM 中。接著，當我們取得參照後，就可以透過 .textContent 變更文字，甚至將計算出的顯示樣式屬性從「none」覆寫為「inline」。頁面現在會顯示「Hello interactive students!」。
JavaScript 也允許我們在 DOM 中建立、設定樣式、附加及移除新元素。從技術層面來說，整個網頁可能只是一個大型 JavaScript 檔案，用來逐一建立及設定元素樣式。雖然這麼做可以達到目的，但在實際操作中，使用 HTML 和 CSS 會更簡單。在 JavaScript 函式的第二部分，我們會建立新的 div 元素、設定文字內容、設定樣式，然後將其附加至主體。

在行動裝置上顯示的網頁預覽畫面。

這樣一來，我們就修改了現有 DOM 節點的內容和 CSS 樣式，並在文件中新增一個全新的節點。我們的網頁不會獲得任何設計獎項，但這正是 JavaScript 提供的強大功能和彈性。

不過，雖然 JavaScript 提供許多強大的功能，但也會在網頁的轉譯方式和時間上造成許多額外的限制。

首先，請注意，在先前的範例中，內嵌指令碼位於頁面底部附近。這是因為您可以自行嘗試，但如果將指令碼移至 <span> 元素上方，您會發現指令碼失敗，並顯示無法在文件中找到任何 <span> 元素參照的錯誤訊息，也就是 getElementsByTagName('span') 會傳回 null。這項特性很重要：指令碼會在文件中插入的位置執行。HTML 剖析器遇到指令碼標記時，會暫停建構 DOM 的程序，並將控制權交給 JavaScript 引擎；JavaScript 引擎執行完畢後，瀏覽器會接續上次的進度，繼續建構 DOM。

換句話說，我們的指令碼區塊無法在網頁中找到任何元素，因為這些元素尚未處理！換句話說，執行內嵌指令碼會阻斷 DOM 建構，也會延遲初始轉譯作業。

在頁面中加入指令碼的另一個微妙屬性是，這些指令碼不僅可以讀取及修改 DOM，還能讀取及修改 CSSOM 屬性。事實上，在本例中，我們將 span 元素的顯示屬性從「none」變更為「inline」，就是為了達到這個效果。最終結果是我們現在有競爭狀況。

如果瀏覽器尚未完成下載及建構 CSSOM，我們要如何執行指令碼？答案對效能來說不太理想：瀏覽器會延遲執行指令碼和建構 DOM，直到完成下載及建構 CSSOM 為止。

簡而言之，JavaScript 會在 DOM、CSSOM 和 JavaScript 執行作業之間引入許多新的依附元件。這可能會導致瀏覽器在處理及轉譯畫面上的網頁時，發生顯著的延遲：

指令碼在文件中的確切位置很重要。
瀏覽器遇到指令碼標記時，DOM 建構作業會暫停，直到指令碼執行完畢為止。
JavaScript 可查詢及修改 DOM 和 CSSOM。
JavaScript 執行作業會暫停，直到 CSSOM 就緒為止。

在很大程度上，「最佳化關鍵轉譯路徑」是指瞭解並最佳化 HTML、CSS 和 JavaScript 之間的依附元件圖表。

剖析器封鎖與非同步 JavaScript

根據預設，JavaScript 執行作業會採取「剖析器阻斷」方式：當瀏覽器在文件中遇到指令碼時，必須暫停 DOM 建構作業，將控制權交給 JavaScript 執行階段，並在繼續執行 DOM 建構作業前讓指令碼執行。在先前的範例中，我們已透過內嵌指令碼實作這項功能。事實上，除非您編寫額外的程式碼來延遲執行，否則內嵌指令碼一律會遭到剖析器阻擋。

那麼，如果使用指令碼標記加入的指令碼呢？以先前的範例為例，將程式碼解壓縮到個別檔案中：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path: Script External</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
    <script src="app.js"></script>
  </body>
</html>

app.js

var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);

試用

無論您使用 <script> 標記或內嵌 JavaScript 片段，兩者的行為都會相同。無論是哪種情況，瀏覽器都會先暫停並執行指令碼，然後再處理文件的其餘部分。不過，如果是外部 JavaScript 檔案，瀏覽器必須暫停，等待從磁碟、快取或遠端伺服器擷取指令碼，這可能會使關鍵算繪路徑延遲數十至數千毫秒。

根據預設，所有 JavaScript 都會啟用剖析器阻斷功能。由於瀏覽器不知道指令碼打算在網頁上執行什麼動作，因此會假設最糟的情況，並封鎖剖析器。向瀏覽器發出信號，指出指令碼不需要在參照的確切位置執行，這樣瀏覽器就能繼續建構 DOM，並在指令碼準備就緒時執行，例如在從快取或遠端伺服器擷取檔案後。

為達成這項目標，我們將 async 屬性新增至 <script> 元素：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path: Script Async</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
    <script src="app.js" async></script>
  </body>
</html>

試用

在指令碼標記中加入 async 關鍵字，可讓瀏覽器在等待指令碼可用時，不阻擋 DOM 建構，進而大幅提升效能。

利用 JavaScript 增加互動

摘要

剖析器封鎖與非同步 JavaScript

意見回饋