Web Worker 能避免页面卡顿，但需严格限定于纯计算任务并正确通信；DOM 操作、轻量任务、错误路径或频繁日志均会导致主线程仍卡顿。
Web Worker 能避免页面卡顿，但前提是它只处理纯计算任务，且通信方式正确；用错场景或传错数据，反而会让页面更卡。
为什么主线程卡了，Worker 还是没救
常见现象：开了 Worker，但滚动还是掉帧、按钮点击无响应、动画跳变。根本原因不是 Worker 没起作用，而是你没把“真卡点”挪进去。
- DOM 操作（如
element.innerHTML = bigHtml、document.querySelector）不能进 Worker，强行塞进去会报ReferenceError: document is not defined - 网络请求虽可在 Worker 中发（
fetch、XMLHttpRequest），但若后续要立刻更新 DOM，主线程仍得等数据回来再渲染——通信延迟可能比同步请求还慢 - 轻量任务（如处理 100 条数据、
JSON.parse一个 5KB 字符串）放进 Worker 反而更慢：启动 Worker + 序列化开销 > 执行本身耗时 - 主线程里还在跑长循环（比如
for (let i = 0; i ），哪怕 Worker 在跑，UI 一样冻结
哪些任务值得塞进 Worker：看耗时和纯度
判断标准很简单：CPU 密集、无 DOM 依赖、单次执行 ≥ 50ms。低于这个阈值，优先用 setTimeout 分片或 requestIdleCallback。
- 图像像素处理：
getImageData拿到的Uint8ClampedArray，滤镜、灰度、卷积运算 - 加密解密：
AES、SHA-256、RSA 密钥生成（注意：Worker 内不能用 Web Crypto API 的某些非标准封装） - 大数组操作：排序（
Array.prototype.sort对 10w+ 元素）、归并、搜索 - 路径规划/数值模拟：如 Dijkstra 算法、蒙特卡洛采样、物理引擎步进
- 文本处理：离线分词、正则批量替换（注意
RegExp可传，但带g标志需重置lastIndex）
postMessage 传大数据，不加 transferable 就等于内存翻倍
错误写法：worker.postMessage(imageData.data) —— 浏览器深拷贝整个 12MB 数组，主线程和 Worker 各占一份，低端机直接 OOM。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：传
ArrayBuffer视图，并在第二个参数中移交所有权：worker.postMessage(data, [data.buffer]) -
OffscreenCanvas路线也必须移交：worker.postMessage(offscreen, [offscreen])，否则报DataCloneError - 别传
ImageData对象本身——它不可 transferable，会静默失败或抛错 - 对象字段尽量扁平：避免嵌套
{meta: {id: 1}, payload: new Uint8Array(...)}，先提取payload.buffer单独 transfer，元数据走普通结构化克隆
Worker 内部别写“一气呵成”的死循环
现象：Worker 里一个 for 循环跑满 200ms，主线程收不到任何消息，用户以为挂了。
- 用时间切片主动让出控制权：
if (i % 1000 === 0 && performance.now() - start > 10) { self.postMessage({progress: i}); return; } - 配合主线程重入：主线程收到
progress后，再发下一批数据，或调用requestAnimationFrame更新进度条 - 避免在 Worker 里频繁
console.log——部分浏览器会同步阻塞，尤其在调试模式下 - 记得清理：任务结束调用
self.close()，或主线程用worker.terminate()，防止长期驻留占用内存
最容易被忽略的一点：Worker 脚本路径是相对当前 HTML URL 的，不是相对于 JS 文件。SPA 项目里 new Worker('./utils/worker.js') 在 /dashboard 路由下会 404，得用绝对路径或动态构造 Blob URL。
