web worker 无法加速单个 cpu 密集型函数，但可避免页面卡顿；必须从独立 js 文件加载，禁用内联字符串；仅支持结构化克隆通信，大对象建议用 transferable 零拷贝；worker 内需分片防假死。
Web Worker 不能直接加速单个 CPU 密集型函数的执行速度，但它能防止这类计算拖垮页面——关键不是“更快”，而是“不卡”。
Web Worker 必须从独立 JS 文件加载
你不能用 new Worker('data:text/javascript,...') 或内联字符串在生产环境可靠运行；浏览器会拒绝执行（尤其在 HTTPS 环境下），本地 file:// 协议更大概率直接报错 SecurityError: Failed to construct 'Worker'。
- 新建一个文件，比如
html-parser.worker.js，只放纯计算逻辑：不访问document、window、localStorage，也不调用 DOM 方法 - 主页面中必须用相对或绝对路径加载：
const worker = new Worker('./html-parser.worker.js') - 确保服务器返回该文件时 MIME 类型是
application/javascript；Vite / Webpack / live-server 默认满足，但 Nginx 或静态托管平台需检查配置
postMessage 通信不是共享变量，数据会被克隆
你传给 Worker 的对象不是引用，而是结构化克隆（structured clone）——函数、DOM 节点、undefined、Symbol 全部丢失。大 HTML 字符串或数组传入时，主线程和 Worker 各持一份副本，内存翻倍。
- 避免传整个
document.body.innerHTML，改用关键字段：比如只传{ html: string, rules: [...] } - 对超大文本（>1MB），优先考虑
Transferable：用Uint8Array+ArrayBuffer包装后传入worker.postMessage(buf, [buf])，主线程立即失去对该缓冲区的访问权，零拷贝移交 - Worker 收到消息后，必须用
self.onmessage = (e) => { ... }或self.addEventListener('message', ...)显式监听，不能依赖闭包变量
Worker 内部也要分片，否则自己会“假死”
哪怕在 Worker 里，一段 for (let i = 0; i 也会阻塞其自身消息循环——主线程发来的 <code>cancel 指令收不到，setTimeout 不触发，Chrome DevTools 可能标红 “Unresponsive Worker”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把任务切块：比如处理 HTML 字符串时，按 2000 字符/段分片，每段处理完用
setTimeout(processNextChunk, 0)让出控制权 - 在每块开头检查中断信号：
if (shouldCancel) { self.postMessage({ type: 'cancelled' }); return; } - 不要依赖
requestIdleCallback：它在 Worker 中不可用；Promise.resolve().then()是更轻量的替代
SharedArrayBuffer 需要跨域隔离头，不是开箱即用
想让多个 Worker 共享一块内存做 HTML 分段解析？先确认你的服务端已返回两个响应头：
Cross-Origin-Embedder-Policy: require-corpCross-Origin-Opener-Policy: same-origin
缺一不可。否则 new SharedArrayBuffer(1024) 直接抛 TypeError: SharedArrayBuffer is not enabled。本地开发时，用 npx serve 或 Vite 启服务比双击 HTML 文件靠谱得多。
真正难的不是写 Worker，而是判断哪段 HTML 处理逻辑值得扔进去——小字符串正则替换没必要，整页 DOM 序列化+Diff 才值得。别为了用而用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
