Web Worker的使用

Posted 2023-03-26

参考技术A Web Worker 的作用，就是为 javascript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

参考：
web worker使用教程以及在vue中的使用
Web Worker 使用教程
浅谈webWorker

web-worker 可运行在浏览器以及node 的web worker

web-worker是一个兼容浏览器以及node 的web worker 实现，node 的实现基于worker_threads

参考使用

• 初始化

yarn init -y

yarn add web-worker

• 入口
  main2.js

 

const Worker = require("web-worker")

const worker = new Worker("./worker2.js");

worker.addEventListener(\'message\', e => {

  console.log(e.data)  // "200 OK"

});

worker.postMessage(\'https://httpstat.us/200\');

• worker2.js

const fetch  = require("isomorphic-fetch")

addEventListener(\'message\', async e => {

  const url = e.data;

  const res = await fetch(url)

  const text = await res.text();

  postMessage(text);

});

• 运行

node main2.js

• 效果

 

 

说明

注意node 版本需要12.8+,利用web-worker，我们可以更好的利用cpu资源，以前也有介绍过一个nodejs 的线程池实现poolifier底层实现技术也是一样的

参考资料

https://github.com/developit/web-worker
https://github.com/pioardi/poolifier