WebWorker

webWorker

web worker 产生原因

众所周知，JavaScript是单线程工作的，如果涉及到密集计算（比如，md5的计算）、延时、异步的任务，通常都是通过setTimeout、promise、XMLHttpRequest实现。

但本质上，它们都是处于一个线程中工作，仍然会对主线程造成阻塞，容易造成页面长时间白屏。

web worker 的实现

web worker 分为三种类型，分别为：
○ 专用 Worker
○ 共享 Worker
○ Service Worker

专用 Worker

专用worker是只能和构造的进行通信，worker中的全局作用域为DedicatedWorkerGlobalScope。

// main.ts
// 兼容
if (!window.Worker) return;
const worker = new Worker("worker.js");

// worker 发送消息
worker.postMessage({
  data: "hello, worker.js"
});

// worker 发送消息
worker.onmessage = function (e) {
  // e.data 为消息体
  worker.terminate(); // 关闭进程
}

// 处理错误
worker.onerror = function (e) {
  // e.data 为消息体
  worker.terminate(); // 关闭进程
}

// work.js
onmessage = function (e) {
  // to do ...
  let workerResult = "Result from worker: " + e.data;
  console.log("Posting message back to main script");
  postMessage(workerResult);
}

共享 Worker

共享worker可以为不同的浏览器上下文提供服务，可以是不同的窗口、iframe或者是worker，各个创建者共享worker的实例，全局作用域为SharedWorkerGlobalScope。

// main.js
let shareWorker = new SharedWorker("shareWorker.js");
shareWorker.port.start();
shareWorker.port.postMessage({
    data: "hello, shareWorker.js"
});
share.port.onmessage = function (event) {
  console.log("receive", event.data);
};

// sharework.js
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    port.postMessage('my name is shareWorker');
  }
}