Web Worker

就 JavaScript 而言，您通常只能在主线程上执行工作，但这只是默认操作。可以在 JavaScript 中注册和使用其他线程。允许在 JavaScript 中实现多线程的功能称为 Web Workers API。

Web Worker 的限制

Web Worker 受到以下限制条件的约束：

  • Web Worker 无法直接访问 DOM。
  • Web Worker 可以通过消息传递流水线与 window 上下文进行通信，这意味着 Web Worker 可以通过某种方式间接访问 DOM。
  • Web Worker 的作用域是 self，而不是 window。
  • Web Worker 范围确实可以访问 JavaScript 基元和构造，以及 fetch 等

基本使用

启动、通信

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

使用场景

  • 预取数据
  • 处理加密

demo

todo