将耗时计算移至 Web Worker 可避免主线程卡死，核心是计算与 UI 分线程运行；Worker 需独立 JS 文件、无 DOM 访问；主线程通过 postMessage 通信；大数据用 Transferable Objects 实现零拷贝；长任务可分片并推送进度反馈。

把耗时计算挪到 Web Worker 里跑，主线程就不再卡死。核心是让计算和 UI 各走各的线程，不抢同一个 CPU 时间片。

创建独立的 Worker 文件

Worker 必须写在单独的 .js 文件中，不能是内联脚本。它运行在隔离环境中，没有 DOM、window 或 document。

• 新建 calc-worker.js，只放纯计算逻辑
• 用 self.onmessage 接收主线程传来的数据
• 用 self.postMessage() 把结果发回去
• 避免调用任何 DOM 方法或全局对象（如 alert、localStorage）

主线程启动并通信

主线程负责触发、传参、更新界面，不参与实际运算。

Alibabacloud Sdk Client Initialization For Java

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

下载

• 用 new Worker('./calc-worker.js') 实例化 Worker
• 调用 worker.postMessage(data) 发送参数（只支持可序列化数据）
• 监听 worker.onmessage 拿到结果后更新 UI
• 记得加 worker.onerror 捕获执行异常

传输大数据要省拷贝开销

结构化克隆会深拷贝整个对象，传大数组或图片像素时很慢。用 Transferable Objects 可以零拷贝移交所有权。

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

• 主线程构造 ArrayBuffer 或 TypedArray
• 调用 postMessage(data, [buffer])，把 buffer 加进第二个参数数组
• Worker 收到后 buffer 就不可再用，但内存直接归属 Worker，无拷贝成本
• 适合 decimal.js 高精度运算、图像处理、百万级数组排序等场景

长任务加进度反馈更友好

如果计算耗时超过几秒，用户容易误以为页面失灵。分片处理 + 主动推送进度能提升体验。

• Worker 内把大任务拆成小块（如每批处理 1 万条）
• 每完成一批，调用 self.postMessage({ type: 'progress', value: 35 })
• 主线程根据 type 字段区分“进度”和“完成”，动态更新 loading 状态
• 避免单次计算太久导致 Worker 被浏览器判定为无响应