浅谈Web Worker和Service worker

Javascript 由于它的单线程特性，任何“重量”操作都会阻塞主线程，让我们的应用变得卡顿、看起来没有响应。为了提升性能和体验，现代浏览器允许我们将一些工作交给 Worker，把原本的单线程应用变成多线程运行。

浏览器中提供了 3 种 Worker，分别是：

1. Web worker—— 包含专用 worker及共享 worker
2. Service worker
3. Worklet—— 包含PaintWorklet、AudioWorklet、AnimationWorklet、LayoutWorklet。

Worklet 似乎是专为媒体之类的应用设计，且仍处于试验状态。因此，本篇内容将只探讨更通用的 Web worker 及 Service worker。

Web worker

Web worker 特别适用于后台跑脚本。现在的网页都可以注册多个 Worker，让不同的任务在各自独立的环境中完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmWroyUz-1666585948825)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d9439fa4d074d5f85b8389ea839360a~tplv-k3u1fbpfcp-zoom-1.image)]

(图片来自Workers Overview)

用Worker API 创建一个页面专属线程的方法如下：

const myWorker = new Worker("worker.js");

如果同源的不同标签想共享一个线程，则可以用SharedWorker API&#