跳到主要内容

Web Worker

2023年12月18日
柏拉文
越努力，越幸运

一、认识​

Vite 中使用 Web Worker 也非常简单

二、语法​

2.1 创建 worker 文件​

Vite 中使用 Web Worker 也非常简单，我们可以在新建 Header/example.js 文件:

const start = () => {
  let count = 0;
  setInterval(() => {
    // 给主线程传值
    postMessage(++count);
  }, 2000);
};

start();

2.2 引入 worker 文件​

引入的时候注意加上?worker后缀，相当于告诉 Vite 这是一个 Web Worker 脚本文件:

import Worker from './example.js?worker';
// 1. 初始化 Worker 实例
const worker = new Worker();
// 2. 主线程监听 worker 的信息
worker.addEventListener('message', (e) => {
  console.log(e);
});

2.3 测试 worker 效果​

打开浏览器的控制面板，你可以看到 Worker 传给主线程的信息已经成功打印, 说明 Web Worker 脚本已经成功执行，也能与主线程正常通信。