Web Worker能够实现在后台线程中运行其他脚本文件，同时线程可以执行任务而不干扰用户界面。当一些不直接操作DOM的业务需要频繁的计算时，使用Web Worker是不错的选择。这里就用定时器任务来实现一个基于Vite+Vue3项目的简单例子。
一般情况下，setTimeout和setInterval是会存在误差的，JavaScript是属于单线程执行，如果当前 执行栈 所花费的时间大于 定时器 时间，那么定时器的回调在 宏任务(macrotask) 里，来不及去调用，就会产生这个时间上的误差。下面在Worker中创建一个setInterval计时器，并打印误差值。
Worker.js
首先建一个worker.js文件。
- 需要创建一个setInterval，每秒钟执行一次，每次执行会计算执行前到开始执行之间的误差值，并将结果打印在控制台。
- 使用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
