2023 年的 Web Worker 项目实践

前言

Web Workers 是 2009 年就已经提案的老技术，但是在很多项目中的应用相对较少，常见一些文章讨论如何写 demo ，但很少有工程化和项目级别的实践，本文会结合 Web Workers 在京东羚珑的程序化设计项目中的实践，分享一下在当下的 2023 年，关于 worker 融入项目的一些思考和具体的实现方式，涉及到的 demo 已经放在 github 上附在文末，可供参考。

先简单介绍下 Web Workers，它是一种可以运行在 Web 应用程序后台线程，独立于主线程之外的技术。众所周知，JavaScript 语言是单线程模型的，而通过使用 Web Workers，我们可以创造多线程环境，从而可以发挥现代计算机的多核 CPU 能力，在应对规模越来越大的 Web 程序时也有较多收益。

Web Workers 宏观语义上包含了三种不同的 Worker： DedicatedWorker(专有worker)、 SharedWorker(共享Worker)、 ServiceWorker，本文讨论的是第一种，其他两种大家可以自行研究一下。

引入 Web Worker

当引入新技术时，通常我们会考虑的问题有：1、兼容性如何？ 2、使用场景在哪？

问题 1，Web Workers 是 2009 年的提案，2012 年各大浏览器已经基本支持，11 年过去了，现在使用已经完全没有问题啦

问题 2，主要考虑了以下 3 点：

1.Worker API 的局限性：同源限制、无 DOM 对象、异步通信，因此适合不涉及 DOM 操作的任务
2.Worker 的使用成本：创建时间 + 数据传输时间；考虑到可以预创建，可以忽略创建时间，只考虑数据传输成本，这里可参考 19 年的一个测试 Is postMessage slow ，简要结论是比较乐观的，大部分设备和数据情况下速度不是瓶颈
3.任务特点：需要是可并行的多任务，为了充分利用多核能力，可并行的任务数越接近 CPU 数量，收益会越高。多线程场景的收益计算，可以参考 Amdahl 公式，其中 F 是初始化所需比例，N 是可并行数：