引言
在 Web 开发中，JavaScript 是单线程运行的，这意味着它在执行任务时会阻塞 UI 渲染，影响用户体验。为了解决这个问题，HTML5 引入了 Web Workers，允许 JavaScript 在后台线程中运行，从而提升页面的性能和响应速度。
什么是 Web Workers？
Web Workers 是 HTML5 提供的一种 Web API，它允许开发者创建独立的后台线程来执行 JavaScript 代码。这些线程独立于主线程运行，不会阻塞 UI 渲染，适用于处理复杂计算、数据处理等耗时任务。
核心特点
- 运行在单独的线程，不会阻塞主线程
- 不能直接操作 DOM（即 document、window 等对象不可用）
- 通过 postMessage() 与主线程通信
- 只能通过 self 访问部分全局对象，如 setTimeout、fetch、IndexedDB 等
- 受同源策略限制，不能跨域加载脚本
Web Workers 的使用方式
创建一个 Worker
Web Worker 需要在一个独立的 JavaScript 文件中编写，然后在主线程中创建并调用它。
准备 Worker 文件
新建一个 worker.js 文件，并编写如下代码：
self.onmessage = function(event) {
let result = event.data * 2; // 简单的计算
self.postMessage(result); // 发送回主线程
};
在主线程中调用
在主线程中实例化 Worker 并监听消息：
// 创建 Worker
let worker = new Worker('worker.js');
// 监听 Worker 返回的数据
worker.onmessage = function(event) {
console.log("Worker 计算结果:", event.data);
};
// 发送数据到 Worker
worker.postMessage(10);
高级应用
使用 Blob 方式创建 Worker
在某些情况下，我们可能不希望单独创建 worker.js 文件，而是直接在主线程中创建 Worker。可以使用 Blob 方式实现：
const workerScript = `
self.onmessage = function(event) {
let result = event.data * 2;
self.postMessage(result);
};
`;
const blob = new Blob([workerScript], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = function(event) {
console.log("Blob Worker 计算结果:", event.data);
};
worker.postMessage(10);
终止 Worker
当 Worker 任务完成后，可以调用 worker.terminate() 立即终止它，以释放资源：
worker.terminate();
应用场景
Web Workers 适用于处理 CPU 密集型任务，例如：
- 大规模数据计算（如复杂数学计算、科学计算）
- 图片和视频处理（如图像滤镜、视频编码）
- 实时数据处理（如 WebSockets 处理高并发数据流）
- 文件操作（如解析大型 JSON、CSV 文件）
示例：计算斐波那契数列
下面是一个递归计算斐波那契数列的 Worker 示例：
// worker.js
self.onmessage = function(event) {
function fibonacci(n) {
return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}
self.postMessage(fibonacci(event.data));
};
主线程调用如下：
// 主线程
let worker = new Worker("worker.js");
worker.onmessage = function(event) {
console.log("斐波那契结果:", event.data);
};
worker.postMessage(40); // 计算第 40 个斐波那契数
局限性
尽管 Web Workers 提供了异步执行能力，但它们仍然存在一些限制：
- 无法直接操作 DOM（不能修改 HTML 元素）
- 主线程和 Worker 之间的通信有开销（数据通过 postMessage 传递）
- 受同源策略限制（只能加载同源的脚本）
- 线程创建和管理成本高（创建大量 Worker 可能会影响性能）
总结
Web Workers 是提升 Web 应用性能的强大工具，特别适用于需要进行高计算量的任务。然而，由于它无法操作 DOM，并且数据传输存在一定开销，因此需要合理使用，以确保整体性能的优化。