JS中Worker相关知识点及用法详细解读

什么是 Ja vaScript 中的 Worker？

简单来说，Ja vaScript 中的 Worker 就是一种能在后台线程中跑代码的 API。它的最大价值，是让主线程（也就是负责 UI 渲染和交互的线程）不再被耗时任务堵死。有了 Worker，Ja vaScript 终于能在多线程环境下干活了，单线程的瓶颈问题也就有了解决方案。

你肯定知道，Ja vaScript 天生是单线程的——所有代码，包括 DOM 操作、事件处理，全都在同一个线程里排队执行。一旦某段代码需要大量计算，或者运行时间过长，整个页面就会卡住，甚至直接崩溃。而 Worker 提供的方法，就是把那些复杂又耗时的任务，扔到后台线程去处理。

Worker 的核心特点

1. 后台线程：Worker 的代码跑在独立的线程里，跟主线程井水不犯河水。
2. 无阻塞：计算密集型任务交给 Worker，主线程就能继续流畅响应。
3. 无 DOM 访问：Worker 不能直接碰 DOM，只能通过消息跟主线程沟通。
4. 消息传递：主线程和 Worker 之间，靠 postMessage() 和 onmessage 事件来交换数据。

基本使用

Ja vaScript 里有好几种 Worker，用法略有不同：

1. Web Worker：标准的 Worker，主要用于网页后台线程。
2. Service Worker：专为网络请求设计的 Worker。
3. Shared Worker：可以被多个脚本或页面共享。

下面重点拆解 Web Worker 的具体用法。

创建 Web Worker

你需要准备一个单独的 Ja vaScript 文件作为 Worker 的入口，然后在主线程里启动它。假设我们有 worker.js 和 main.js 两个文件。

1. 创建 Worker 文件

先写一个 worker.js，里面放 Worker 要执行的代码：

// worker.js
// Worker 内部不能访问 DOM，但可以执行任何复杂的计算任务
self.onmessage = function(event) {
    // 接收主线程发送的数据
    const number = event.data;
    // 进行耗时的计算任务，比如计算一个数的平方
    const result = number * number;
    // 将结果返回给主线程
    self.postMessage(result);
};

self 是 Worker 内部的全局对象，相当于主线程里的 window，但没有任何 UI 相关的 API（比如不能操作 DOM）。onmessage 用来监听主线程发送的数据，postMessage 负责把结果传回去。

2. 在主线程中创建 Worker

接下来在 main.js 里创建并使用 Worker：

// main.js
// 创建一个新的 Worker 实例，指向 worker.js 文件
const worker = new Worker('worker.js');

// 主线程向 Worker 发送消息
worker.postMessage(10); // 发送数字 10，Worker 将计算 10 的平方

// 监听 Worker 返回的消息
worker.onmessage = function(event) {
    console.log('从 Worker 接收到的数据:', event.data); // 输出: 100
};

// 错误处理
worker.onerror = function(error) {
    console.error('Worker 出现错误:', error.message);
};

这里 postMessage() 把数据从主线程发给 Worker，onmessage 监听 Worker 处理完返回的数据。Worker 特别适合跑那些计算密集型的任务（比如数学运算、数据处理），不会影响主线程的流畅性。

3. 停止 Worker

任务完成后，可以手动终止 Worker：

// 终止 Worker
worker.terminate();

一旦调用 terminate()，Worker 会立即停止，不再处理任何后续任务。适当地终止 Worker 能节省系统资源。

使用 Worker 传递复杂数据

Worker 不仅能处理简单的数字、字符串，还能传递对象和数组。下面扩展一下，传递一个对象进去，让 Worker 处理它：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    // 假设传入的是一个对象，我们对它的属性进行处理
    const result = {
        squared: data.number * data.number,
        doubled: data.number * 2
    };
    // 返回结果给主线程
    self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');

// 向 Worker 发送一个对象
worker.postMessage({ number: 5 });

// 监听 Worker 返回的对象
worker.onmessage = function(event) {
    const result = event.data;
    console.log('平方:', result.squared);   // 输出: 25
    console.log('翻倍:', result.doubled);  // 输出: 10
};

Worker 的局限性

1. 无法访问 DOM：Worker 不能直接操作 DOM。如果涉及 UI 相关操作，必须通过 postMessage() 跟主线程通信。
2. 同源策略：Worker 脚本必须与页面脚本同源，不能跨域加载 Worker 文件。
3. 性能开销：虽然 Worker 能提升性能，但创建 Worker 本身也有开销，尤其是大量 Worker 时会增加资源消耗。
4. 脚本文件：创建 Worker 必须通过外部文件，不能在同一个脚本里直接定义 Worker 代码。

实际场景中的应用

1. 处理大数据：Worker 常用于数据密集型计算，比如图像处理、文件解析、复杂算法。
2. 保持 UI 流畅：在不阻塞用户界面的前提下执行长时间运行的任务。
3. 实时数据处理：通过 Worker 进行后台数据处理、文件操作等，不会影响页面响应速度。

示例：使用 Worker 处理大量数据

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const processedData = data.map(item => item * 2); // 模拟处理大量数据
    self.postMessage(processedData);
};

// main.js
const worker = new Worker('worker.js');

// 模拟大量数据
// '-' 是占位符，表示不关心这个参数的值，它是 Array.from 方法的第一个参数
// i 是第二个参数，表示当前数组元素的索引
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
worker.postMessage(largeArray);

worker.onmessage = function(event) {
    console.log('处理完成的数据:', event.data); // 将显示处理后的数据
};

这个例子生成了一个包含百万个元素的数组，交给 Worker 处理。完成后，Worker 把处理后的新数组返回给主线程。

总结

Ja vaScript 的 Worker API 是一把利器，能帮开发者处理耗时任务，避免页面卡顿。它的核心思路是：让后台线程执行代码，不阻塞主线程，通过消息传递来通信。

• Worker 是运行在后台线程的脚本，主线程与 Worker 之间通过 postMessage() 和 onmessage 沟通。
• Worker 不能访问 DOM，但非常适合计算密集型任务。
• 创建 Worker 有一定开销，建议合理使用，尤其是多 Worker 环境下要谨慎。

把复杂计算任务搬到 Worker 里，用户体验会明显提升，应用也能保持流畅。动手试试吧。