使用Web Worker可在后台线程执行耗时计算，避免阻塞界面。首先创建worker.js并编写后台逻辑，通过new Worker('worker.js')实例化；主线程用postMessage发送数据，onmessage接收结果；Worker内部通过self.onmessage监听，处理完成后用postMessage返回结果；任务结束应调用terminate()或self.close()释放资源；同时需在主线程监听error事件，并在Worker内使用try-catch捕获异常，确保稳定运行。
如果您希望在网页中执行耗时的计算任务而不阻塞用户界面，可以使用 HTML5 的 Web Worker 技术将任务分配到后台线程中运行。以下是实现多线程处理的具体方法：
一、创建基本的 Web Worker
通过实例化 Worker 对象，可以在浏览器中启动一个独立于主线程的脚本执行环境，从而避免长时间运算导致页面卡顿。
1、创建一个名为 worker.js 的 JavaScript 文件，并在其中编写需要在后台线程中运行的代码，例如：
self.onmessage = function(e) { let result = 0; for (let i = 0; i
立即学习“前端免费学习笔记（深入）”；
2、在主 JavaScript 文件中创建 Worker 实例并发送数据：
const worker = new Worker('worker.js'); worker.postMessage(1000000);
3、监听来自 Worker 的返回结果：
worker.onmessage = function(e) { console.log('计算结果：', e.data); }
二、传递复杂数据与结构化克隆
Web Worker 支持通过结构化克隆算法传递包括对象、数组在内的复杂数据类型，但不支持函数和某些特殊对象。
1、在主线程中准备一个包含多个属性的对象：
const data = { numbers: [1, 2, 3, 4, 5], threshold: 10, operation: 'sum-above' };
2、将该对象发送给 Worker：
const worker = new Worker('worker.js'); worker.postMessage(data);
3、在 worker.js 中接收并处理数据：
self.onmessage = function(e) { const { numbers, threshold, operation } = e.data; if (operation === 'sum-above') { const result = numbers.filter(n => n > threshold).reduce((a, b) => a + b, 0); postMessage(result); } }
三、终止 Worker 线程
当某个 Worker 完成任务或不再需要时，应主动关闭以释放系统资源，防止内存泄漏。
1、在主线程中调用 terminate() 方法立即结束 Worker：
worker.terminate();
2、在 Worker 内部代码执行完毕后，也可以自行调用 close() 来关闭自身：
self.close();
3、注意 terminate() 是强制中断，而 close() 是正常退出，推荐在任务完成后使用 self.close()。
四、处理错误与异常捕获
为了确保 Worker 出现运行时错误时不会影响主程序稳定性，必须设置错误监听机制。
1、在主线程中为 Worker 添加 error 事件监听器：
worker.onerror = function(error) { console.error('Worker 发生错误：', error.message); console.error('出错文件：', error.filename); console.error('行号：', error.lineno); }
2、在 worker.js 中使用 try-catch 包裹可能出错的代码段：
try { // 可能引发异常的操作 } catch (e) { postMessage({ error: e.message }); }
3、通过消息通道将错误信息传回主线程进行统一处理。
