可以做什么网络工作者不能做什么(web worker vs service worker)-码文网

可以做什么，网络工作者不能做什么？反之亦然？

似乎 web worker 是 service worker 功能的一个子集。这是正确的吗?

252

Buksy's answer是正确的，但在我看来，它并没有回答原来的问题，即：“可以做什么，网络工作者不能做什么？反之亦然？”

它们的生命周期和您可以拥有的每个源的实例数量存在根本差异。

               | 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中获取了此表，从slide 35开始。

特别是，这里是你如何产生和终止网络工作者：

Using Web Workers

而有自己的生命周期，这无疑是他们“最复杂的部分”:

The Service Worker Lifecycle

因此，生活方式是两者之间的一个根本区别（其预期用途的结果）。

浏览器支持曾经有一个巨大的差异：在 11.3（2018 年 3 月 29 日）之前，iOS 版 Safari 中根本没有，请参阅Can I use service workers?相比之下，网络工作者在 2012 年已经有了更好的浏览器支持：Can I use web workers?

如果你必须支持 IE11，你只能使用网络工作者：IE11 没有，显然是end of support for IE11 is October 14, 2025。

在浏览器中，它们的API 支持有细微的差异，请参阅HTML5 Worker Test（也由 Nolan Lawson 撰写）。在特定的浏览器中，一种工作程序可能支持某种 API 调用，而另一种则不支持。访问该页面并测试您自己的浏览器！

199

它们的用途有很大的不同：

Web 工作人员

Web Workers 为 Web 内容提供了一种在后台线程中运行脚本的简单方法。工作线程可以在不干扰用户界面的情况下执行任务。此外，它们可以使用 XMLHttpRequest 执行 I / O（尽管 responseXML 和 channel 属性始终为 null）。创建后，工作人员可以通过将消息发布到该代码指定的事件处理程序来将消息发送到创建它的 JavaScript 代码（反之亦然）。

Source-Using Web Workers

本质上充当位于 Web 应用程序，浏览器和网络（如果可用）之间的代理服务器。它们旨在（除其他外）启用有效的离线体验，拦截网络请求并根据网络是否可用以及服务器上是否存在更新的资产采取适当的措施。他们还将允许访问推送通知和后台同步 API。

Source-Service Worker API

因此，Web Workers 可以方便地运行昂贵的脚本，而不会导致用户界面冻结，而 Service Workers 对于修改来自网络请求的响应很有用（例如，在构建离线应用程序时）。

是浏览器和网络之间的代理。通过拦截文档发出的请求，可以将请求重定向到缓存，从而实现脱机访问。

/* 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 工作人员

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);
}

原始帖子Here

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处