工作器概览

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

Andrew Guan
Andrew Guan
GitHub
Demián Renzulli
Demián Renzulli
X GitHub

本概览介绍了 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）、它们的异同，以及在生产网站中使用它们的最常见模式。

显示 Window 对象与 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 可以在后台继续运行，即使网站没有任何打开的活跃标签页也是如此。

使用场景

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

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

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

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

视频游戏 PROXX 的屏幕截图。

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

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

工具和库

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

视频游戏 PROXX 的屏幕截图。

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。