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

在最後幾個單元中，您已瞭解到延遲 載入 JavaScript 和延遲載入圖片和 <iframe> 元素。 延後資源載入可在初始期間減少網路和 CPU 用量 並在需要時下載資源 而不是事先載入這些元件，這樣他們就可能會用不到 這麼做可以縮短初始網頁載入時間，但後續的互動可能會產生 如果系統尚未載入供電作業所需的資源，就會延遲一段時間 。

舉例來說，如果網頁包含自訂日期挑選器，您可以將日期延後 直到使用者與元素互動為止。不過，載入中 日期挑選器的隨選資源可能會導致延遲時間稍長，但 取決於使用者的網路連線、裝置功能，或 直到資源下載、剖析並且可供執行為止。

這有點難度，因為不想為了載入頻寬而浪費頻寬 可能會導致未使用的資源，但會延遲互動和後續網頁 也不太理想幸好，您可以運用許多工具 藉此在這兩種極端主義之間取得更好的平衡，本單元將介紹 您可以運用哪些技術來達成這個目標，例如預先擷取資源 預先轉譯整個網頁，以及使用 Service Worker 預先快取資源。

以低優先順序預先擷取近期所需資源

您可以預先擷取「資源」，包括圖片、樣式表、 或 JavaScript 資源，方法是使用 <link rel="prefetch"> 資源提示。 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。推測規則是以 JSON 物件形式定義 加到該網頁的 HTML 中，或透過 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 預先快取

您也可以使用服務 Worker，以推測的方式預先擷取資源。 Service Worker 預先快取可使用 Cache API 擷取並儲存資源。 允許瀏覽器使用 Cache API 處理要求，而不需要 網路。Service Worker 預先快取會使用非常有效的 Service Worker 快取策略，又稱為「僅限快取策略」。這個模式相當常見 因為資源只要放在 Service Worker 快取中 收到要求後，幾乎會立即擷取。

顯示從頁面到 Service Worker 的快取流程。
僅快取策略只會從 安裝期間。安裝完成後 資源只能從 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)。適用對象 若是尚未版本化的資源，您可以在建構期間為其產生修訂版本。

設定完成後，服務工作人員就能用於友善快取靜態網頁或 子資源加快後續頁面瀏覽速度。

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 快取相同。

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

下一篇：網路工作站總覽

現在您已經瞭解預先擷取、預先轉譯和服務工作站預先快取的方式 這或許有助於加快瀏覽速度 的網頁，就可以做出一些有利的決策 對您的網站和使用者來說好處多多。

接下來，我們彙整了網路工作站總覽，並說明相關成本高昂 並且讓主執行緒有更多呼吸空間，以備不時之需 使用者互動狀況想知道該如何讓 執行緒更多呼吸空間，接下來兩個單元值得您的時間！