網路工作處理程序和服務工作人員如何提升網站效能，以及何時應該使用網路工作處理程序和服務工作處理程序。
本總覽將說明網路工作處理程序和服務工作人員如何提升網站效能，以及何時該使用網路工作處理程序和服務工作人員。請參閱這個系列的其他影片，瞭解特定視窗模式和服務工作站通訊。
工作人員如何改善網站
瀏覽器使用單一執行緒 (主執行緒) 執行網頁中的所有 JavaScript，以及執行轉譯網頁和執行垃圾收集等工作。過多的 JavaScript 程式碼可能會封鎖主執行緒，進而延遲瀏覽器執行這些工作，導致使用者體驗不佳。
在 iOS/Android 應用程式開發中，常見的做法是確保應用程式的主要執行緒能繼續回應使用者事件，是將作業卸載至其他執行緒。事實上，在最新的 Android 版本中，封鎖主執行緒過長會造成應用程式當機。
在網站上，JavaScript 的設計是以單一執行緒的概念為中心，缺乏實作單一應用程式具有共用記憶體等多執行緒模型的功能。
儘管有這些限制，您仍可使用工作站在背景執行緒中執行指令碼，在不干擾主執行緒的情況下執行工作，以達成類似模式。工作站是指在獨立執行緒上執行的整個 JavaScript 範圍，而沒有任何共用記憶體。
在這篇文章中，您將瞭解兩種不同的工作站類型 (網路工作站和服務工作處理程序)、兩者的相似性和差異，以及最常見的網站使用模式。
Web Worker 和 Service Worker
相似處
網路工作站和服務工作站是網站可用的兩種工作站類型。這些項目的幾個共同點如下：
- 兩者都是在次要執行緒中執行，允許 JavaScript 程式碼在不封鎖主執行緒和使用者介面的情況下執行。
- 他們沒有
Window和Document物件的存取權，因此無法直接與 DOM 互動，且對瀏覽器 API 的存取權有限。
差異
其中一個可能認為可以委派給網路工作站的大多數內容都可以在服務工作站中完成，反之亦然，但兩者之間有一些重大差異：
- 與網路工作站不同，Service Worker 可讓您攔截網路要求 (透過
fetch事件)，以及在背景監聽 Push API 事件 (透過push事件)。 - 一個頁面可以產生多個網路工作站，但單一 Service Worker 可控管其註冊時所用範圍下的所有使用中分頁。
- 網路 worker 的生命週期與所屬的分頁緊密耦合，而服務工作站的生命週期則與它無關。因此，關閉執行網路工作站的分頁會終止，而服務工作站可以繼續在背景中執行，即使網站沒有開啟任何使用中的分頁也一樣。
用途
這兩種工作站類型的差異，指出哪一種情況適合使用其中一種工作站：
網路工作站的用途通常與卸載至次要執行緒的工作 (例如繁重運算) 有關，藉此避免封鎖 UI。
服務工作站工作通常更與做為網路 Proxy、處理背景工作，以及快取和離線等工作更相關。
範例：在 Podcast PWA 中，使用者可能會想下載完整劇集，以便在離線時收聽。Service Worker，特別是 Background Fetch API 可用於這方面。如此一來，如果使用者在下載節目時關閉分頁，工作就不會受到影響。
工具與程式庫
使用不同較低層級的 API 即可實作視窗和工作站通訊。幸好，有程式庫負責簡化這項程序，可處理最常見的用途。在本節中，我們會說明兩種工作模式，分別管理網路工作站和 Service Worker 的窗口：Comlink 和 Workbox。
漫畫連結
Comlink 是一個小型 (1.6k) RPC 程式庫，可在建構使用網路工作站的網站時處理許多基礎詳細資料。它曾用於 PROXX 和 Squoosh 等網站。您可以前往這裡查看其動機和程式碼範例。
Workbox
Workbox 是熱門的程式庫，可用來建構使用 Service Worker 的網站。其中封裝了有關快取、離線、背景同步處理等作業的一系列最佳做法。workbox-window 模組可讓您輕鬆在服務工作站和頁面之間交換訊息。
後續步驟
本系列的其餘部分著重於視窗和服務 Worker 通訊模式：
- 命令式快取指南：從網頁呼叫 Service Worker，預先快取資源 (例如在預先擷取情境中)。
- 廣播更新：從服務工作處理程序呼叫頁面，以通知重要更新資訊 (例如有可用的網站新版本)。
- 雙向通訊：將工作委派給服務工作站 (例如大量下載)，並讓頁面持續掌握進度。
如需視窗與網路工作站通訊模式，請參閱「使用網路工作站在瀏覽器主執行緒上執行 JavaScript」。