将耗时计算移至Web Worker可避免主线程阻塞，核心步骤为：编写独立Worker脚本（不可访问DOM）、主线程创建Worker实例并通信、注意数据传递限制与内存清理。

直接把耗时计算挪到后台线程，主线程继续响应点击、滚动和渲染，页面就不会卡。核心就三步：写一个独立的 Worker 脚本、在主线程里创建它、用消息来回传数据。

准备一个独立的 Worker 文件

Worker 代码不能写在主 JS 里，必须单独存成一个 .js 文件（比如 calculator.js），内容以 self 或 globalThis 为全局对象，不能访问 document、DOM 或 window：

• 监听主线程发来的数据：self.onmessage = (e) => { const input = e.data; ... }
• 执行计算（比如排序一万个对象、解析大 JSON、模拟物理运算）
• 把结果发回去：self.postMessage(result)
• 可选：中途汇报进度，比如每处理 5% 就 self.postMessage({ type: 'progress', value: 5 })

主线程中创建并通信

在主页面的 JS 里，用 new Worker() 启动，然后用 postMessage 发送任务参数：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 创建实例：const worker = new Worker('calculator.js');
• 发送数据：worker.postMessage({ data: hugeArray, method: 'sort' });
• 监听返回：worker.onmessage = (e) => { console.log('完成', e.data); };
• 捕获错误：worker.onerror = (err) => { console.warn('Worker 执行出错', err.message); };

注意数据传递的边界

主线程和 Worker 不共享内存，所有通信都靠序列化，所以：

立即学习“Java免费学习笔记（深入）”；

• 能传：普通对象、数组、字符串、数字、布尔值、Date、RegExp（部分浏览器）、ArrayBuffer（推荐用于大数据）
• 不能传：函数、DOM 元素、undefined、Symbol、循环引用对象
• 大数据建议用 transferable objects（如 ArrayBuffer），避免拷贝开销：worker.postMessage(buffer, [buffer]);
• Worker 文件需同源，不能是 data URL 或 blob URL（除非用 new Worker(URL.createObjectURL(...))）

用完记得清理

任务结束或页面卸载前，主动终止 Worker 可释放资源：

• 主线程调用：worker.terminate();
• 也可在 Worker 内部调用 self.close() 结束自己
• 不终止也不会报错，但长期空跑会占用内存和线程