关于webworker的理解和在react中使用

Yuer丶

已于 2023-08-16 15:38:31 修改

阅读量652

点赞数

文章标签： react.js 前端前端框架

于 2023-07-20 09:37:58 首次发布

本文链接：https://blog.youkuaiyun.com/Cute_new_rookie/article/details/131822628

版权

Webworker是JavaScript为解决单线程限制而创建的多线程环境，允许在后台线程执行任务，提高性能。在React中，可以创建Worker线程进行异步操作，通过postMessage进行通信，并使用terminate或close关闭线程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅学习了一下webworker的概念

webworker是什么

js采用的是单线程模型,所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力

相对的webwork就是为js创造多线程的环境,允许主线程创建webwork线程,将未处理的一些任务分给后者运行.在js主线程运行的同时,work线程在后台运行,两者互不打扰,等到webwork线程的任务结束后,把结果返回给主线程

webworker注意点

(1) 同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
(2) DOM限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
(3) 通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成
(4) 脚本限制:Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
(5) 文件限制: Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

在react中使用

1、创建子线程worker.js文件，代码如下：

const workercode = () => {
    self.onmessage = function (e) {
      let workerResult = `主线程发来的: ${e.data}`;
      console.log(workerResult);
      self.postMessage('子线程返回的：zzz');
    };
  };
   
  let code = workercode.toString();
  code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));
   
  const blob = new Blob([code], { type: 'application/javascript' });
  const worker_script = URL.createObjectURL(blob);
   
  export default worker_script;

2、在主进程中引入文件

import woker_script from "./work" //引入
const woker = new Worker(woker_script);
  woker.postMessage('hello world');

  woker.onmessage = (e) => {
    console.log(e.data)
 }

如果子进程要加载脚本的话，使用

importScripts('script1.js');

3、关闭worker

// 主线程
worker.terminate();

// Worker 线程
self.close();