在现代 web 应用中，前端开发面临着越来越多的性能挑战，尤其是处理大量计算、数据处理和图像操作时，前端代码需要占用大量 CPU 时钟周期，这通常会导致应用变得缓慢以及难以响应。为了解决这些性能问题，我们可以使用 Web Worker 技术。
Web Worker 允许我们在主线程之外创建新的后台线程（Worker 线程），以便单独执行复杂的计算和任务。由于 Worker 线程和主线程运行在不同的线程上下文中，它们之间不会相互阻塞，从而提高了各种计算密集的任务的执行效率。在这篇文章中，我们将介绍如何使用 npm 包 workerjs，以方便我们在项目中使用 Web Worker 技术。
安装 workerjs
要使用 workerjs，首先需要在项目中安装它，可以通过以下命令来安装：
npm install workerjs
或者使用 yarn：
yarn add workerjs
创建 Worker
使用 workerjs 创建一个 Worker 线程非常简单，只需要调用 workerjs 提供的默认函数，向其中传递一个 JavaScript 文件的 URL，workerjs 会自动将这个 JavaScript 文件编译成 Worker 线程，代码如下：
import Worker from "workerjs";
const worker = new Worker("worker.js");监听 Worker 事件
在主线程中监听 Worker 线程的事件也很容易。workerjs 支持以下三种事件类型：
- error：在 Worker 线程中出现错误时触发。
- message：从 Worker 线程接收消息时触发。
- terminate：在 Worker 线程终止时触发。
以下代码展示了如何在主线程中监听 Worker 线程的消息事件：
// 在主线程中监听消息事件
worker.addEventListener("message", (event) => {
console.log("主线程接收到了 Worker 线程发送的消息：", event.data);
});给 Worker 发送消息
主线程可以向 Worker 线程发送消息，以传递数据并指示 Worker 线程执行某些操作。要向 Worker 线程发送消息，请使用 postMessage 函数：
// 在主线程中向 Worker 线程发送消息
worker.postMessage({ type: "run", data: { x: 1, y: 2 } });在 Worker 中处理消息
在 Worker 线程中接收和处理消息也很简单，对于每个消息，Worker 线程都会触发 onmessage 事件，并将消息对象保留在事件的 data 属性中。以下是一个简单的例子：
-- -------------------- ---- ------- -- - ------ --------------- --------- - ------- -- - ------------------- ---------------- ------------ -- ---- ----- ---- - ----------- ----- ------ - ------ - ------- -- ---------- ------------------------ -------- -------------------- --
在 Worker 中使用第三方库
大多数情况下，在 Worker 线程中使用第三方库是欢迎的，但是由于 Worker 线程没有 DOM 等主线程环境的 API，因此需要一些特殊的操作。
由于 browserify 无法在 Worker 线程中使用 Node.js API，因此您需要使用另一种打包工具（如 webpack）来打包 Worker 线程使用的代码。
以下是一个简单的示例代码，其中使用了 Lodash 库：
-- -------------------- ---- ------- ------ ------ ---- --------- -- - ------ --------------- --------- - ------- -- - ------------------- ---------------- ------------ -- ---------- ----- ---- - ----------- ----- ------ - ------------------ -------- -- ---------- ------------------------ -------- -------------------- --
结束 Worker 线程
当您不再需要 Worker 线程时，应该关闭它以释放资源。调用 terminate 函数即可关闭 Worker 线程：
// 在主线程中关闭 Worker 线程 worker.terminate();
总结：使用 workerjs 简单、直接，方便我们使用 Web Worker 技术，避免在主线程中卡住 UI 线程，提高 web 应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe6c6