在 Web 开发中，JavaScript 的单线程特性意味着执行耗时任务时会阻塞 UI 渲染，直接影响用户体验。HTML5 引入的 Web Workers 允许脚本在后台线程运行，有效解决了这一问题。
什么是 Web Workers？
Web Workers 是一种 Web API，它让开发者能创建独立的后台线程来执行 JavaScript 代码。这些线程与主线程隔离，不会卡住界面，非常适合处理复杂计算或数据处理。
核心特点
- 运行在独立线程，不阻塞主线程
- 无法直接操作 DOM（如
document、window） - 通过
postMessage()与主线程通信 - 仅能通过
self访问部分全局对象（如setTimeout、fetch） - 受同源策略限制，通常需加载同源脚本
实战：如何创建与使用
1. 独立文件模式
最常规的做法是将 Worker 逻辑写在单独的 JS 文件中，例如 worker.js。
// worker.js
self.onmessage = function(event) {
let result = event.data * 2;
self.postMessage(result);
};
在主线程中实例化并调用：
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
console.log("Worker 计算结果:", event.data);
};
worker.postMessage(10);
2. Blob 动态创建
如果不想维护额外的文件，可以直接用 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.terminate() 释放资源。
典型应用场景
Web Workers 主要适用于 CPU 密集型任务，例如：
- 大规模数据计算：复杂数学运算、科学计算
- 媒体处理：图像滤镜、视频编码
- 实时数据流：WebSocket 高并发处理
- 文件解析：读取大型 JSON 或 CSV 文件
示例：斐波那契数列计算
递归计算大数阶乘会严重阻塞 UI，放入 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));
};
主线程只需监听消息即可：
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
console.log("斐波那契结果:", event.data);
};
worker.postMessage(40);
局限性与注意事项
虽然功能强大，但使用时仍需注意以下限制：
- DOM 隔离：Worker 内部不能修改页面元素，所有 UI 更新必须通过主线程。
- 通信开销：主线程与 Worker 间的数据传递是拷贝而非引用，大数据量传输可能带来性能损耗。
- 资源成本：创建大量 Worker 会消耗内存和系统资源，需按需分配。
- 环境限制：部分旧浏览器不支持，且跨域加载受限。
总结
Web Workers 是提升 Web 应用响应速度的利器，特别适合处理高计算量任务。只要合理规避 DOM 操作限制并注意通信成本，就能在保证流畅体验的同时发挥硬件的最大算力。
