Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。所以,在我们有大量运算任务时,可以把运算任务交给 Worker 线程去处理,当 Worker 线程计算完成,再把结果返回给 js 主线程。这样,js 主线程只用专注处理业务逻辑,不用耗费过多时间去处理大量复杂计算,从而减少了阻塞时间,也提高了运行效率,页面流畅度和用户体验自然而然也提高了。
具体在vite构建的vue3项目中的使用方法如下:
1.在项目src目录下,新建worker文件夹,新建index.ts
self.onmessage = (e) => {
console.log('主线程发送过来的数据', e.data)
const { data } = e
setTimeout(() => {
data.name = 'wq'
self.postMessage(data)
}, 5000);
}
2.在项目中实际应用worker
import Worker from '@/worker/index?worker'
// vite项目如何引用worker 参考https://cn.vitejs.dev/guide/features.html
const workderData = ref({
name: '王琪',
age: 26
})
const sendData = () => {
const worker = new Worker()
worker.postMessage(JSON.parse(JSON.stringify(workderData.value)))
worker.onmessage = e => {
console.log('线程完成', e.data)
workderData.value = e.data
}
}