comlink

Comlink Comlink 让 [WebWorkers][webworker] 变得有趣。Comlink 是一个微小的库（1.1kB），它消除了思考 postMessage 的心理障碍，并隐藏了您正在与工作程序进行工作的事实。在更抽象的层面上，它是 postMessage 和 [ES6 Proxies][es6 proxy] 的 RPC 实现。 $ npm install --save comlink 浏览器支持与打包大小 浏览器不支持 [ES6 Proxy] 可以使用 [proxy-polyfill]。大小：2.5k，gzip 后 1.2k，brotli 后 1.1k 介绍 在移动电话上，尤其是低端移动电话上，保持主线程尽可能空闲是很重要的，这样它就可以快速响应用户交互并提供无卡顿的体验。UI 线程应仅用于 UI 工作。WebWorkers 是一种 Web API，允许您在单独的线程中运行代码。要与另一个线程通信，WebWorkers 提供了 postMessage API。您可以使用 myWorker.postMessage(someObject) 将 JavaScript 对象作为消息发送，在工作程序中触发消息事件。Comlink 将这种基于消息的 API 转换为更加开发者友好的东西，通过提供一个 RPC 实现：一个线程中的值可以在另一个线程中使用（反之亦然），就像本地值一样。示例 运行简单的函数 main.js JavaScript 导入 Comlink 从 "https://unpkg.com/comlink/dist/esm/comlink.mjs"; async function init() { const worker = new Worker("worker.js"); // WebWorkers 使用 postMessage，因此与 Comlink 进行工作。 const obj = Comlink.wrap(worker); alert(Counter: ${await obj.counter}); await obj.inc(); alert(Counter: ${await obj.counter}); } init(); worker.js JavaScript importScripts("https://unpkg.com/comlink/dist/umd/comlink.js"); // importScripts("../../../dist/umd/comlink.js"); const obj = { counter: 0, inc() { this.counter++; }, }; Comlink.expose(obj); 回调 main.js JavaScript 导入 Comlink 从 "https://unpkg.com/comlink/dist/esm/comlink.mjs"; // 导入 Comlink 从 "../../../dist/esm/comlink.mjs"; function callback(value) { alert(Result: ${value}); } async function init() { const remoteFunction = Comlink.wrap(new Worker("worker.js")); await remoteFunction(Comlink.proxy(callback)); } init(); worker.js jav…