Web Workers是浏览器的多线程API，可将耗时任务移至后台线程执行，避免阻塞主线程。通过创建独立JS文件并用new Worker()实例化，主程序与Worker间以postMessage通信，实现如斐波那契计算等密集任务，提升页面响应性。
在Web开发中，JavaScript是单线程的，这意味着所有任务都在同一个主线程上执行。当遇到复杂计算（如大数据处理、图像操作、加密解密等）时，主线程容易被阻塞，导致页面卡顿、响应变慢甚至无响应。为了解决这个问题，可以使用Web Workers将耗时任务转移到后台线程中执行，从而保持页面流畅。
什么是Web Workers？
Web Workers 是浏览器提供的多线程API，允许JavaScript在后台线程中运行脚本，不会影响用户界面的操作。它独立于主线程，可用于执行计算密集型任务，避免阻塞UI渲染和事件响应。
需要注意的是，Web Worker 无法直接操作DOM，也不能使用window对象，但可以使用setTimeout、XMLHttpRequest、fetch等API。
如何创建和使用Web Worker
使用Web Worker的基本步骤如下：
- 创建Worker文件：将需要在后台执行的代码写入一个独立的JS文件，例如worker.js。
- 在主线程中实例化Worker：通过new Worker('worker.js')启动Worker。
- 通过postMessage通信：主线程与Worker之间通过消息机制传递数据。
- 监听onmessage事件：接收对方发来的消息。
示例：计算斐波那契数列
main.js（主线程）
const worker = new Worker('worker.js');
<p>// 发送数据到Worker
worker.postMessage(40);</p><p>// 接收Worker返回结果
worker.onmessage = function(e) {
console.log('计算结果:', e.data);
};</p><p>// 处理错误
worker.onerror = function(error) {
console.error('Worker出错:', error);
};
worker.js（后台线程）
// 耗时计算函数
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
<p>// 监听主线程消息
self.onmessage = function(e) {
const result = fibonacci(e.data);
self.postMessage(result); // 将结果返回
};
这样，复杂的递归计算就在后台完成，主线程依然可以自由滚动、点击或输入，用户体验不受影响。
实际应用场景与优化建议
Web Workers特别适用于以下场景：
- 大数据集的排序或过滤
- 图像或音频的数据处理（如Canvas像素操作）
- 加密/解密运算（如AES、RSA）
- JSON解析或大型数组遍历
- 实时数据计算（如图表更新）
优化建议：
- 尽量减少主线程与Worker之间的通信频率，大批量数据一次性传输更高效。
- 使用transferable objects（如ArrayBuffer）可实现零拷贝传输，提升性能。
- 任务完成后及时调用worker.terminate()释放资源。
- 对于频繁使用的Worker，可考虑使用SharedWorker或Worker池管理。
兼容性与注意事项
现代主流浏览器都支持Web Workers，包括Chrome、Firefox、Safari、Edge等。但在使用时需注意：
- Worker文件必须来自同源，不能从本地文件系统直接加载（file://协议受限）。
- 调试Worker可通过浏览器开发者工具的“Sources”面板查看。
- 某些全局对象（如document、window）在Worker中不可用。
基本上就这些。合理使用Web Workers，能显著提升网页性能，让复杂计算不再拖慢用户体验。关键是把“重活”交给后台，让主线程专注交互与渲染。
