Web Worker多线程编程

Jinuss2024-09-02 8:33

Web Worker 解决了什么问题

浏览器 Javascript 是以单线程方式运行的，也就是意味着 JS 执行和 UI 渲染占用同一个主线程，当 Javascript 进行高负载的数据处理或运算时，UI 渲染就很有可能被阻断，浏览器就会出现卡顿，这样很容易降低用户体验。

为此，Javascrip 提供了异步操作,如定时器、ajax、I/O 回调等，但这些异步代码都是运行在主线程上的，如果主线程被阻塞，那么异步代码也就无法执行，不能从根本上解决问题。所以多线程Web worker应运而生，它是 HTML5 标准的一部分，允许创建一个新的子线程，子线程和主线程可以同时允许，且互不干扰。

此外 worker 和主线程之间可以通过postMessage和onmessage方法进行双向数据通信

Web Worker 如何使用

示例如下

js 复制代码

/*main.js*/
const worker = new Worker("./js/worker.js");
console.log("🚀 ~ worker:", worker);
worker.postMessage("hello");
worker.onmessage = ({ data }) => {
  console.log("🚀", data);
  for (let i = 0; i < 100; i++) {
    console.log("main:", i);
  }
  // worker.terminate()
};

js 复制代码

/*worker.js*/
addEventListener("message", ({ data }) => {
  console.log(data);
  postMessage("hi");
  for (let i = 0; i < 100; i++) {
    console.log("worker:", i);
  }
});

Web Worker 需要注意的问题

访问限制

woorker 子线程所在的全局对象，与主线程不在同一个上下文环境，所以无法访问到主线程的 window 对象，包括 document 对象，document 对象无法被访问到，但是可以通过 postMessage 来传递数据。

跨域限制

worker 脚本文件必须与主线程脚本同源，这个可以将 worker 脚本文件转换成 Blob 对象，在生成 URL，传给 Worker 的构造函数

应用场景

使用专用线程进行数学运算，比如处理大批量数据、读取用户上传文件、更改 canvas 位图等
高频用户交互
数据的预取