工作器概览

Web Worker 和 Service Worker 如何提高网站性能，以及何时使用 Web Worker 与 Service Worker。

Andrew Guan

Demián Renzulli

本概览介绍了 Web Worker 和 Service Worker 如何提升网站性能，以及何时使用 Web Worker 或 Service Worker。如需了解窗口和服务工作器通信的具体模式，请参阅本系列的其他文章。

Worker 如何改进您的网站

浏览器使用单个线程（主线程）运行网页中的所有 JavaScript，以及执行呈现网页和执行垃圾回收等任务。运行过多的 JavaScript 代码可能会阻塞主线程，导致浏览器延迟执行这些任务，从而导致用户体验不佳。

在 iOS/Android 应用开发中，为确保应用的主线程能够自由响应用户事件，一种常见模式是将操作分流到其他线程。事实上，在最新版本的 Android 中，主线程阻塞时间过长会导致应用崩溃。

在 Web 上，JavaScript 是围绕单线程概念设计的，缺乏实现多线程模型（如应用所具有的多线程模型，如共享内存）所需的功能。

尽管存在这些限制，但通过使用 worker 在后台线程中运行脚本，可以在 Web 中实现类似的模式，从而使它们能够在不干扰主线程的情况下执行任务。Worker 是一个在单独线程上运行的完整 JavaScript 作用域，没有任何共享内存。

在本文中，您将了解两种不同类型的 worker（Web worker 和 Service Worker）、它们的异同，以及在生产网站中使用它们的最常见模式。

Web worker 和 Service Worker

相似之处

Web worker 和 service worker 是网站可用的两种 worker。它们有一些共同点：

• 两者都在辅助线程中运行，从而允许 JavaScript 代码在不阻塞主线程和界面的情况下执行。
• 它们无权访问 Window 和 Document 对象，因此无法直接与 DOM 交互，并且对浏览器 API 的访问权限有限。

不同之处

有人可能会认为，大多数可以委托给 Web Worker 的工作都可以在 Service Worker 中完成，反之亦然，但它们之间存在重要差异：

• 与 Web worker 不同，Service Worker 允许您拦截网络请求（通过 fetch 事件）并在后台监听 Push API 事件（通过 push 事件）。
• 一个页面可以生成多个 Web Worker，但单个 Service Worker 会控制其注册范围内的所有活动标签页。
• Web worker 的生命周期与其所属的标签页紧密耦合，而 service worker 的生命周期则独立于标签页。因此，关闭运行 Web Worker 的标签页会终止该 Worker，而 Service Worker 可以在后台继续运行，即使网站没有任何打开的活跃标签页也是如此。

注意：对于相对较短的工作（例如发送消息），当没有活跃标签页时，浏览器不太可能终止 Service Worker，但如果任务用时过长，浏览器将终止 Service Worker，否则会给用户的隐私和电池带来风险。Background Fetch 等 API，可让您避免 Service Worker 终止。

使用场景

这两种 worker 之间的差异表明了在哪些情况下可能需要使用其中一种：

Web worker 的应用场景通常与将工作（例如繁重的计算）分流到辅助线程有关，以避免阻塞界面。

• 示例：开发视频游戏 PROXX 的团队希望尽可能释放主线程，以便处理用户输入和动画。为此，他们使用了 Web Worker，在单独的线程上运行游戏逻辑和状态维护。

Service Worker 任务通常更侧重于充当网络代理、处理后台任务以及缓存和离线等操作。

示例：在播客 PWA 中，您可能希望允许用户下载完整的分集，以便在离线时收听。为此，可以使用 Service Worker，尤其是 Background Fetch API。这样一来，如果用户在下载剧集时关闭标签页，任务也不会中断。

界面会更新以指示下载进度（左图）。得益于 Service Worker，即使所有标签页都已关闭，操作仍可继续运行（右侧）。

工具和库

您可以使用不同的底层 API 来实现窗口和 worker 通信。幸运的是，有一些库可以抽象化此过程，从而处理最常见的用例。在本部分中，我们将介绍其中两个分别负责窗口到 Web Worker 和 Service Worker 的库：Comlink 和 Workbox。

Comlink

Comlink 是一个小型 (1.6k) RPC 库，可在构建使用 Web Worker 的网站时处理许多底层细节。它已在 PROXX 和 Squoosh 等网站中使用。如需查看其动机和代码示例的摘要，请点击此处。

Workbox

Workbox 是一个热门库，用于构建使用 Service Worker 的网站。它封装了一组围绕缓存、离线、后台同步等方面的最佳实践。workbox-window 模块提供了一种在 Service Worker 和页面之间交换消息的便捷方式。

后续步骤

本系列的其余部分重点介绍窗口和服务工作线程通信的模式：

• 命令式缓存指南：从页面调用 Service Worker 以提前缓存资源（例如，在预提取场景中）。
• 广播更新：从 Service Worker 调用页面，以通知重要更新（例如，有新版网站可用）。
• 双向通信：将任务委托给 Service Worker（例如大量下载），并让页面随时了解进度。

如需了解窗口和 Web Worker 通信的模式，请参阅使用 Web Worker 在浏览器的非主线程中运行 JavaScript。