html怎么用comlink通信_Comlink如何在HTML多线程中传递数据-html教程-PHP中文网

comlink通过worker实现主线程与工作线程通信，核心是主线程用wrap包装worker实例、worker端用expose暴露对象，双方需引入comlink库；传函数需无外部引用，promise错误需查worker控制台，class实例须转为plain object或调用静态/实例方法，arraybuffer等大对象需手动transfer避免拷贝。

html怎么用comlink通信_comlink如何在html多线程中传递数据

Comlink 用在 HTML 页面里，主线程和 Worker 之间怎么连上

得先明确一点：Comlink 本身不直接“嵌入 HTML”，它跑在 JS 环境里，靠 Worker 或 SharedWorker 搭建通信通道。你写在 <script></script> 里的代码是主线程，new Worker('xxx.js') 启动的是另一个线程——Comlink 就在这两者之间做“函数代理”的桥。

实操关键三步：

主线程用 Comlink.wrap() 包住 Worker 实例，拿到一个“像本地对象一样调用的远程接口”
Worker 脚本里用 Comlink.expose() 把要共享的对象（比如一个带方法的对象）挂到全局
两边都必须引入 comlink 库，推荐用 ESM 方式动态导入，避免打包冲突

常见错误现象：TypeError: Cannot read properties of undefined (reading 'someMethod')——大概率是 Worker 里没调 Comlink.expose()，或者主线程 wrap 的时机早于 Worker 执行完 expose。

传递函数、Promise、class 实例时为什么报错或行为异常

Comlink 只能序列化“可转移”或“可代理”的东西。它不是深拷贝，而是靠 Proxy + MessageChannel 自动把调用转成异步消息。所以：

传普通函数（非箭头、非闭包）可以，但函数体不能引用外部变量，否则运行时报 ReferenceError
返回 Promise 没问题，Comlink 会自动 await 并把结果传回来；但 Promise 内部 throw 的错误，在主线程里捕获到的是 DOMException: Failed to execute 'postMessage' on 'MessagePort'，实际原因藏在 Worker 控制台里
不能直接传 class 实例（比如 new MyClass()），只能传 plain object 或暴露 class 的静态方法/实例方法，再由对方 new ——否则序列化后只剩 {}

示例：Worker 里暴露一个计数器对象

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

import { expose } from 'comlink';
const counter = {
  value: 0,
  inc() { this.value++ },
  get() { return this.value }
};
expose(counter);

主线程调用：await workerProxy.get() 返回数字，workerProxy.inc() 不会返回值（因为 void 函数），也没法同步读 workerProxy.value ——那是代理对象自己的属性，不是 Worker 里的副本。

用 Comlink 传 ArrayBuffer 或图片数据，怎么避免复制开销

大数组（比如图像像素、音频 buffer）默认会被结构化克隆，产生完整内存拷贝。想零拷贝，必须用 transfer 机制，而 Comlink 支持自动识别 ArrayBuffer、MessagePort、OffscreenCanvas 等可转移对象。

只要你在 Worker 里返回的是原生 ArrayBuffer（不是 Uint8Array.buffer 那种被引用的），Comlink 会自动加到 transferList
但如果返回的是 { data: myBuffer, meta: {} } 这样的对象，Comlink 不会自动 transfer，得手动用 Comlink.transfer() 包一层
注意：transfer 后，原线程的 buffer 立即变 detached，不能再访问，否则报 TypeError: ArrayBuffer is detached

手动 transfer 示例：

// 主线程
const buf = new ArrayBuffer(1024);
const transferred = Comlink.transfer(buf, [buf]); // 第二个参数是 transferList
await workerProxy.process(transferred);

Chrome 扩展、Electron 或旧版 Safari 里 Comlink 失效怎么办

根本原因是 Comlink 依赖 MessageChannel 和 structuredClone（或 fallback 的 structured clone algorithm）。老浏览器（如 Safari structuredClone，会导致复杂对象序列化失败；Chrome 扩展 content script 默认禁用 SharedArrayBuffer，但 Comlink 不依赖它，真正卡住的是某些扩展环境禁止 new Worker() 或拦截 importScripts。

兼容 Safari 15.6+：确保不传 Map/Set，改用 plain object；关掉 Comlink.enableDebugMode()（它依赖 console.group，老 Safari 不支持）
Electron 渲染进程：如果启用了 contextIsolation: true（推荐），Worker 脚本里无法直接访问 window，需用 contextBridge 注入 Comlink，或改用 preload 加载 Comlink 后再 new Worker
调试技巧：在 Worker 里加 console.log(self)，确认 Comlink 是否已加载；检查 self.constructor.name === 'DedicatedWorkerGlobalScope'，排除被当成普通 script 执行