首页 前端知识 Vue3 Vite TypeScript使用Web Worker

Vue3 Vite TypeScript使用Web Worker

2024-06-13 21:06:48 前端知识 前端哥 199 132 我要收藏

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
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12027.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!