Web Worker基本使用

Web Worker 是一种在后台运行的 JavaScript 脚本，可以在不影响页面性能的情况下执行耗时任务。

使用基本步骤

创建 Worker 文件

// worker.js

// 定义一个处理消息的函数
self.onmessage = function(event) {
    // 接收主线程发送的消息
    const data = event.data;
    
    // 在后台执行耗时任务
    const result = performTask(data);
    
    // 将结果发送回主线程
    self.postMessage(result);
};

// 定义一个耗时任务
function performTask(data) {
    // 执行一些耗时的操作
    return "Processed data: " + data;
}

在主线程中使用 Worker

在JavaScript 文件中，通过创建 Worker 对象来启动你的 Web Worker。

// 主 JavaScript 文件

// 创建一个新的 Worker 实例
const worker = new Worker('worker.js');

// 发送消息给 Worker
worker.postMessage('Some data to process');

// 监听来自 Worker 的消息
worker.onmessage = function(event) {
    // 处理从 Worker 返回的结果
    console.log('Received result from Worker:', event.data);
};

处理 Worker 的消息

在主线程中，你可以通过监听 onmessage 事件来接收来自 Worker 的消息，并且可以通过调用 postMessage() 方法向 Worker 发送消息。

终止 Worker

当你不再需要 Worker 时，可以通过调用 terminate() 方法来终止 Worker。例如：

// 终止 Worker
worker.terminate();

在React中的使用

创建 Worker 文件

//src/Worker/worker.ts
const workerFunction = function () {
    // 我们要在这个函数中执行的所有操作都在这里进行
   self.onmessage = (event: MessageEvent) => {
      console.log(event.data);

      postMessage('Message has been gotten!');
   };
};

// 这将串联整个函数
let codeToString = workerFunction.toString();
// 这样，括号中的代码就会以字符串形式显示出来
let mainCode = codeToString.substring(codeToString.indexOf('{') + 1, codeToString.LastIndexOf('}'));
// 将代码转换成原始数据
let blob = new Blob([mainCode], { type: 'application/javascript' });
// 用 blob 对象创建一个 url，然后就可以开始了
let worker_script = URL.createObjectURL(blob);

export default worker_script;

React 组件中访问 Worker 文件

//src/App.tsx
import { useEffect } from 'react';
import worker_script from './Worker/worker';

let worker: Worker;

function App() {
   if(window.Worker)
     worker = new Worker(worker_script);

   useEffect(() => {
      worker.postMessage('Beunos Dias!');
   });
   return <p>Web Workers</p>;
}
export default App;