web worker 必须使用独立 js 文件且不能在 file:// 协议下运行，需通过本地服务（如 http-server）启动；路径应使用 new url('./worker.js', import.meta.url) 确保正确解析，通信需双向绑定 onmessage，大对象传输应使用 transferable 实现零拷贝。
直接在 index.html 里写 Web Worker 脚本不行，必须拆成独立 .js 文件；否则浏览器会报 Failed to construct 'Worker'，本地双击打开的 file:// 页面必然失败。
new Worker() 路径报错：Failed to construct 'Worker'
这个错误不是语法问题，而是浏览器拒绝加载脚本——根本原因是路径不可 fetch 或跨协议/跨源。
-
file://协议下绝对不行，必须用本地服务启动（如npx http-server、VS Code Live Server） - 相对路径如
'./worker.js'在 Vite/Webpack 等构建工具中容易解析错，推荐统一用new Worker(new URL('./worker.js', import.meta.url)) - CDN 上的脚本（如
https://cdn.example.com/worker.js）即使开了 CORS 也无效 ——new Worker()强制同源，不走 CORS 流程 - 想绕过文件限制？用
Blob动态构造：new Worker(URL.createObjectURL(new Blob(['self.onmessage = ...'], {type: 'application/javascript'})))
主线程发了 postMessage，Worker 却没收到
不是代码没执行，而是监听没绑对位置或时机不对。Worker 不像 Promise 有默认回调，全靠你显式注册。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 主线程必须在
worker.postMessage()之前设置worker.onmessage，否则第一条消息直接丢掉；更健壮的做法是worker.addEventListener('message', ...) - Worker 文件里写了
console.log('init')≠self.onmessage已生效 —— 必须显式写self.onmessage = function(e) { ... }或self.addEventListener('message', ...) - Worker 内部抛未捕获异常（比如
JSON.parse失败）默认静默，加self.onerror = e => self.postMessage({type: 'error', message: e.message})主动透传
传大数组卡顿几百毫秒，怎么避免深拷贝
结构化克隆对普通 Array 是完整复制，10MB 就明显卡。关键不是“怎么传”，而是“怎么移交所有权”。
- 只对
ArrayBuffer、TypedArray（如Uint8Array）、ImageBitmap、OffscreenCanvas和MessagePort支持transfer参数 - 主线程发送时必须把
buffer列进第二个参数：worker.postMessage({data}, [data.buffer])；之后data.buffer变成byteLength: 0，不能再读 - Worker 接收后直接用：
const view = new Uint8Array(e.data.data)—— 这就是同一块内存，零拷贝
最容易被忽略的是：Worker 不能操作 DOM，也不访问 document、localStorage、alert，连 fetch 都得用 self.fetch（兼容性差）。所有 UI 更新必须由主线程完成，通信协议要提前约定好结构，别裸传原始数组或无类型对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
