如何在HTML中利用Web Workers分担主线程计算压力-html教程-PHP中文网

web workers仅适用于不操作dom且纯cpu密集型任务，如超10万条数据排序、图像像素处理、加密解密、数值模拟及2mb以上json解析；误将io或渲染类操作移入worker反而降低性能。

如何在html中利用web workers分担主线程计算压力

Web Workers 能分担主线程计算压力，但前提是任务满足两个硬条件：不操作 DOM，且纯 CPU 密集型。否则开再多 Worker 也白搭，甚至拖慢整体性能。

怎么判断一个任务该不该扔给 Worker

主线程卡顿 ≠ 所有耗时操作都该进 Worker。常见误判包括：把 fetch 请求、setTimeout 延迟、DOM 渲染循环塞进 Worker——这些要么不被允许（Worker 没有 fetch 的 polyfill 问题，实际支持但需注意 CORS），要么根本没收益（延迟本身不占 CPU）。

真正适合的场景只有这些：

数组排序/去重/聚合（数据量 ≥ 10 万条）
图像像素级处理（如灰度转换、卷积滤镜）
加密解密（AES.encrypt、SHA256 等）
数值模拟（物理引擎、蒙特卡洛采样）
大 JSON 解析（原始字符串 > 2MB）

如果任务执行时间 document、window、localStorage，就别强行塞 Worker——它连 console.log 都得走 postMessage 中转，反而增加开销。

创建 Worker 时最容易漏掉的三件事

新手常以为只要 new Worker('worker.js') 就完事了，其实漏掉关键点会导致内存泄漏或通信失败：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

没做浏览器兼容检测：typeof Worker === 'undefined' 必须前置判断，尤其在 Electron 旧版或 iOS Safari 14.5 以下环境会直接报错
Worker 文件路径出错：相对路径基于 HTML 文件位置，不是 JS 文件位置；用 new URL('./worker.js', import.meta.url) 更可靠
没监听 error 事件：Worker 内部抛错不会冒泡到主线程，必须显式写 worker.onerror = e => console.error(e.filename, e.lineno, e.message)

传大数据时为什么越传越慢？

默认 postMessage(data) 是深拷贝，传一个 10MB 的 ArrayBuffer，主线程和 Worker 各持一份副本，内存翻倍，序列化也耗时。解决方法是用 Transferable Objects：

const buffer = new ArrayBuffer(10 * 1024 * 1024); // 10MB
const view = new Uint8Array(buffer);
// ... 填充数据
worker.postMessage(view, [buffer]); // 第二个参数移交所有权

移交后，主线程的 buffer 变成 detached 状态，再访问会报 TypeError: ArrayBuffer is detached。所以务必确认数据已发完再移交，且 Worker 收到后不能往回传这个 buffer。