Vite项目中使用Web Worker

Web Worker能够实现在后台线程中运行其他脚本文件，同时线程可以执行任务而不干扰用户界面。当一些不直接操作DOM的业务需要频繁的计算时，使用Web Worker是不错的选择。这里就用定时器任务来实现一个基于Vite+Vue3项目的简单例子。

一般情况下，setTimeout和setInterval是会存在误差的，JavaScript是属于单线程执行，如果当前 执行栈 所花费的时间大于 定时器 时间，那么定时器的回调在 宏任务(macrotask) 里，来不及去调用，就会产生这个时间上的误差。下面在Worker中创建一个setInterval计时器，并打印误差值。

Worker.js

首先建一个worker.js文件。

1. 需要创建一个setInterval，每秒钟执行一次，每次执行会计算执行前到开始执行之间的误差值，并将结果打印在控制台。
2. 使用onmessage来接受发送过来的消息，当消息参数为start时，我们就执行计时器函数，如果为stop则回传消息表示已经关闭计时器功能。

let timer = null
const now1 = performance.now()
let count = 0

const interval = () => {
  timer = setInterval(() => {
    count++
    const now2 = performance.now()
    postMessage(count)
    console.log("误差值：", now2 - now1 - 1000 * count)
  }, 1000)
}

onmessage = function (event) {
  const { data } = event
  if (data === "start") {
    interval()
  }
  if (data === "stop") {
    clearInterval(timer)
    this.postMessage("ended")
  }
  console.log(event.data)
}

使用Web Worker

基于vite+vue3的项目，我们需要引入文件，并给后缀注明为worker类型

import MyWorker from "@/utils/worker.js?worker"

对导入内容进行实例化（注册）

const worker = new MyWorker()

注册了worker实例，我们开始发送消息给Worker启动定时器。

worker.postMessage("start")

Worker会收到消息参数start，然后执行定时器，我们就可以在控制台中看到打印的误差值。

终止Web Worker执行

当任务不需要再执行，我们可以利用Web Worker提供的terminate方法终止Web Worker任务。它不会等待 worker 去完成它剩余的操作。

// 监听消息
worker.onmessage = e => {
  if (e.data === "ended") {
    worker.terminate() // 终止操作
  }
}

完整的示例

<template>
<h1>{{ count }}</h1>
</template>

<script lang="ts" setup>
import MyWorker from "@/utils/worker.js?worker"

const worker = new MyWorker()
const count = ref(0)
  
// 监听消息
worker.onmessage = e => {
  if (e.data === "ended") {
    worker.terminate()
  } else {
    count.value = e.data
  }
}

onMounted(() => {
  worker.postMessage("start")
})
</script>

结果

下面来看看谷歌浏览器执行时的误差值：

image.png

safari执行时的误差值：

image.png