使用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 完成任务或不再需要时，应主动关闭以释放系统资源，防止内存泄漏。
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载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 });}