Service Worker 可以做什么而 Web Worker 不能？或相反亦然？
似乎网络工作者是服务工作者功能的一个子集。这个对吗？
Service Worker 可以做什么而 Web Worker 不能？
IT技术
javascript
html
service-worker
web-worker
w3c
2021-02-28 11:09:04
3个回答
Buksy 的回答是正确的，但在我看来它没有回答最初的问题，即：“服务工作者可以做什么而网络工作者不能？反之亦然？”
它们的生命周期和您可以拥有的每个源的实例数量存在根本差异。简而言之：
| Web Workers | Service Workers |
|--------------|--------------|------------------|
| Instances | Many per tab | One for all tabs |
| Lifespan | Same as tab | Independent |
| Intended use | Parallelism | Offline support |
Buksy 的回答基本上是表格的最后一行。图片来源：我从Nolan Lawson 的Demystifying Web Workers and Service Workers 中获取了这张表格，从幻灯片 35开始。
特别是，以下是您生成和终止 Web Worker 的方式：
而服务工作者有自己的生命周期，这无疑是他们“最复杂的部分”：
所以生命周期是两者之间的一个根本区别（它们的预期用途的结果）。
过去在浏览器支持方面存在巨大差异：直到 11.3（2018 年 3 月 29 日），iOS 版 Safari 中的 Service Worker 完全不可用，请参阅我可以使用 Service Worker 吗？相比之下，Web Workers 在 2012 年已经有了更好的浏览器支持：我可以使用 Web Workers 吗？
如果一定要支持IE11，只能使用web worker：IE11没有service worker，显然IE11的支持结束日期是2025年10月14日。
它们对浏览器的API 支持存在细微差别，请参阅HTML5 Worker Test（也由 Nolan Lawson 编写）。在特定的浏览器中，一种 worker 可能支持某个 API 调用，而另一种则不支持。访问该页面并测试您自己的浏览器！
它们的用途有很大的不同：
网络工作者
Web Workers 为 Web 内容提供了一种在后台线程中运行脚本的简单方法。工作线程可以在不干扰用户界面的情况下执行任务。此外，它们可以使用 XMLHttpRequest 执行 I/O（尽管 responseXML 和 channel 属性始终为 null）。创建后，工作人员可以通过将消息发布到该代码指定的事件处理程序（反之亦然）来向创建它的 JavaScript 代码发送消息。
服务工作者
Service Worker 本质上充当位于 Web 应用程序、浏览器和网络（如果可用）之间的代理服务器。它们旨在（除其他外）能够创建有效的离线体验、拦截网络请求并根据网络是否可用以及更新的资产是否驻留在服务器上采取适当的行动。他们还将允许访问推送通知和后台同步 API。
因此，Web Workers 可以方便地运行昂贵的脚本而不会导致用户界面冻结，而 Service Workers 可用于修改来自网络请求的响应（例如，在构建离线应用程序时）。
服务人员
Service Worker 是浏览器和网络之间的代理。通过拦截文档发出的请求，服务工作者可以将请求重定向到缓存，从而实现离线访问。
/* main.js */
navigator.serviceWorker.register('/service-worker.js');
/* service-worker.js */
// Install
self.addEventListener('install', function(event) {
// ...
});
// Activate
self.addEventListener('activate', function(event) {
// ...
});
// Listen for network requests from the main document
self.addEventListener('fetch', function(event) {
// ...
});网络工作者
Web Worker 是通用脚本，使我们能够从主线程卸载处理器密集型工作。
/* main.js */
// Create worker
const myWorker = new Worker('worker.js');
// Send message to worker
myWorker.postMessage('Hello!');
// Receive message from worker
myWorker.onmessage = function(e) {
console.log(e.data);
}原帖在这里