預先擷取、預先算繪和 Service Worker 預先快取

在最後的模組中，您發現一些概念，例如延遲載入 JavaScript、延遲載入圖片和 <iframe> 元素。延遲資源載入作業會在初始載入網頁期間下載資源 (而非預先載入資源)，藉此減少網路和 CPU 用量。這麼做可以縮短初始頁面載入時間，但如果解決問題所需的資源尚未載入，則後續的互動可能會產生延遲。

舉例來說，如果頁麵包含自訂日期挑選器，您可以將日期挑選器的資源延後到使用者與元素互動為止。不過，載入日期挑選器的資源可能會延遲 (可能略微，但取決於使用者的網路連線、裝置功能或兩者)，直到資源已下載、剖析和執行為止。

這有點複雜。您不希望載入可能未使用的資源來浪費頻寬，但延遲互動與後續的網頁載入也不是理想的做法。幸好，您可以使用許多工具，在這兩種極端之間取得更好的平衡，而且本單元將介紹一些可用於達到目標的技巧，例如預先擷取資源、預先算繪整個頁面，以及使用服務工作站預先快取資源。

不久後需要預先擷取 (低優先順序) 所需的資源

使用 <link rel="prefetch"> 資源提示可以預先擷取「資源」，包括圖片、樣式表或 JavaScript 資源。prefetch 提示會告知瀏覽器不久之後可能需要資源。

如果指定 prefetch 提示，瀏覽器可能會以最低優先順序為該項資源發出要求，避免干擾當前頁面所需的資源。

預先擷取資源可以改善使用者體驗，因為使用者不需要等待不久後下載所需資源，因為系統會在需要時立即從磁碟快取中擷取資源。

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

上述 HTML 程式碼片段會通知瀏覽器在閒置時預先擷取 date-picker.js 和 date-picker.css。此外，您也可以在使用者透過 JavaScript 與網頁互動時，以動態方式預先擷取資源。

除了 Safari 以外，所有新式瀏覽器都支援 prefetch，且可在標記後方使用。如果您非常需要以所有瀏覽器都正常運作的方式預先載入網站的資源 (並且使用 Service Worker)，請參閱本模組的後續章節，瞭解如何使用 Service Worker 快取資源。

預先擷取網頁，加快日後瀏覽的速度

您也可以在指向 HTML 文件時指定 as="document" 屬性，藉此預先擷取網頁及其所有子資源：

<link rel="prefetch" href="/page" as="document">

當瀏覽器閒置時，可能會向 /page 發出低優先順序的要求。

在以 Chromium 為基礎的瀏覽器中，您可以使用 Speculation Rules API 預先擷取文件。推測規則的定義為包含在網頁 HTML 中的 JSON 物件，或透過 JavaScript 動態新增：

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

JSON 物件說明一或多個動作 (目前只支援 prefetch 和 prerender)，以及與該動作相關聯的網址清單。在上述 HTML 程式碼片段中，瀏覽器指示瀏覽器預先擷取 /page-a 和 /page-b。推測規則與 <link rel="prefetch"> 類似，規範規則會提示瀏覽器在特定情況下可能會忽略。

Quicklink 這類程式庫會在使用者可視區域顯示網頁後，動態預先擷取或預先算繪網頁連結，藉此改善網頁瀏覽體驗。與預先擷取網頁上的所有連結相比，這種做法可以提高使用者最終造訪該網頁的可能性。

預先算繪頁面

除了預先擷取資源以外，您也可以提示瀏覽器在使用者前往頁面之前預先算繪頁面。這麼做可以提供近乎即時的頁面載入，因為系統會在背景擷取及處理頁面及其資源。使用者前往該頁面後，頁面就會置於前景。

Speculation Rules API 支援預先算繪：

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>

預先擷取及預先算繪示範

Service Worker 預先快取

您也可以使用服務工作站來推測性預先擷取資源。Service Worker 預先快取可以使用 Cache API 擷取及儲存資源，讓瀏覽器使用 Cache API 提供要求，而不必連線至網路。Service Worker 預先快取使用非常有效的 Service Worker 快取策略，稱為「僅限快取策略」。這種模式非常有效率，因為資源放到 Service 工作站快取中後，就能在要求時幾乎立即擷取。

顯示服務工作處理程序從網頁到服務工作站到快取的流程。
僅限快取策略只會在服務工作站安裝期間，從網路擷取符合條件的資源。安裝之後，系統只會從 Service Worker 快取中擷取快取資源。

如要透過 Service Worker 預先快取資源，可以使用 Workbox。但如有需要，您可以編寫自己的程式碼來快取一組預先決定的檔案。無論您決定要使用 Service Worker 預先快取資源，請務必瞭解，安裝服務工作站時會發生預先快取。安裝完成後，就能在網站服務工作處理程序所控制的任何網頁上擷取預先快取資源。

Workbox 使用預先快取資訊清單決定要預先快取哪些資源。預先快取資訊清單是檔案和版本管理資訊的清單，做為要預先快取資源的「可靠來源」。

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

上述程式碼是資訊清單範例，其中包含兩個檔案：script.ffaa4455.js 和 /index.html。如果資源在檔案本身中包含版本資訊 (稱為「檔案雜湊」)，則 revision 屬性可以保留為 null，因為檔案已經過版本化 (例如，上述程式碼中的 script.ffaa4455.js 資源的 ffaa4455)。針對未版本的資源，系統可能會在建構時為其產生修訂版本。

設定完成後，系統就會用 Service Worker 預先快取靜態頁面或其子資源，加快後續的網頁瀏覽速度。

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

舉例來說，在電子商務產品資訊頁面上，服務工作人員可用來預先快取轉譯產品詳細資料頁面所需的 CSS 和 JavaScript，讓瀏覽產品詳細資料頁面的速度更快。在前述範例中，系統會預先快取 product-page.ac29.css 和 product-page.39a1.js。workbox-precaching 中的 precacheAndRoute 方法會自動註冊所需的處理常式，確保系統會在必要時透過 Service Worker API 擷取預先快取資源。

由於受到服務工作站廣泛支援，因此您可以在任何需要此狀況的新型瀏覽器中使用 Service Worker 的快取功能。

學以致用

prefetch 提示的優先順序為何？

高。
請再試一次。
媒介。
請再試一次。
低。
答對了！

預先擷取和預先轉譯網頁有何不同？

雖然預先擷取和針對頁面預先算繪會取得網頁及其所有子資源，但預先擷取作業只會擷取網頁及其所有資源，而預先算繪則會傳回整個網頁，直到使用者前往該網頁為止。
答對了！
大致上相同，只有預先算繪會取得網頁的所有子資源，而預先擷取則不會。
請再試一次。

Service Worker 快取和 HTTP 快取相同。

是
請再試一次。
false
答對了！

下一項：網路工作站總覽

既然您已經瞭解預先擷取、預先轉譯和 Service Worker 預先快取的助益，現在就能加快後續頁面的瀏覽速度，可以開始做出明智的決策，判斷這項功能對自家網站和使用者有何助益。

接下來，我們將概略介紹網路工作站，並說明他們如何從主執行緒中處理昂貴的工作，並為主執行緒提供更充裕的使用者互動空間，讓使用者與使用者互動。如果您想知道如何讓主執行緒有更多呼吸空間，接下來兩個單元非常值得您花時間！