第三方库

workerize

let worker = workerize(`
	export function add(a, b) {
		// block for half a second to demonstrate asynchronicity
		let start = Date.now();
		while (Date.now()-start < 500);
		return a + b;
	}
`);

(async () => {
  console.log("3 + 9 = ", await worker.add(3, 9));
  console.log("1 + 2 = ", await worker.add(1, 2));
})();

我们也可以使用 workerize-loader 作为Webpack插件来加载Web Worker:

// worker.js
export function expensive(time) {}

// app.js
import worker from "workerize-loader!./worker";

let instance = worker(); // `new` is optional

instance.expensive(1000).then(count => {
  console.log(`Ran ${count} loops`);
});

You cannot use Local Storage in service workers. It was decided that service workers should not have access to any synchronous APIs. You can use IndexedDB instead, or communicate with the controlled page using postMessage().

Comlink

Comlink使WebWorkers变得愉快。Comlink是一个很小的库（1.1kB），它消除了思考postMessage的思维障碍，并掩盖了您与工人一起工作的事实。在手机上，尤其是在低端手机上，重要的是保持主线程尽可能空闲，以便它可以快速响应用户交互并提供无垃圾的体验。UI线程应仅用于UI工作。WebWorkers是一个Web API，允许您在单独的线程中运行代码。为了与另一个线程通信，WebWorkers提供了postMessage API。您可以使用myWorker.postMessage（someObject）将JavaScript对象作为消息发送，从而在worker内部触发消息事件。

通过提供RPC实现，Comlink将基于消息的API变成了对开发人员更友好的实现：来自一个线程的值可以在另一个线程内使用（反之亦然），就像本地值一样。

Simple App

main.js

import * as Comlink from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
async function init() {
  const worker = new Worker("worker.js");
  // WebWorkers use `postMessage` and therefore work with Comlink.
  const obj = Comlink.wrap(worker);
  alert(`Counter: ${await obj.counter}`);
  await obj.inc();
  alert(`Counter: ${await obj.counter}`);
}
init();

worker.js

importScripts("https://unpkg.com/comlink/dist/umd/comlink.js");
// importScripts("../../../dist/umd/comlink.js");

const obj = {
  counter: 0,
  inc() {
    this.counter++;
  }
};

Comlink.expose(obj);

Callback

main.js

import * as Comlink from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
// import * as Comlink from "../../../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

importScripts("https://unpkg.com/comlink/dist/umd/comlink.js");
// importScripts("../../../dist/umd/comlink.js");

async function remoteFunction(cb) {
  await cb("A string from a worker");
}

Comlink.expose(remoteFunction);

最近更新于0001-01-01