webWoker vue2.X环境的应用

striker_c

已于 2023-10-26 23:19:35 修改

阅读量789

点赞数

分类专栏： vue js 文章标签： vue.js 前端 javascript

于 2023-02-09 15:11:28 首次发布

本文链接：https://blog.csdn.net/striker_c/article/details/128953238

版权

本文介绍了如何在Vue2.x项目中应用webWorker，通过安装worker-loader，编写worker.js并引入，实现计算密集型任务的后台处理，避免页面卡顿，确保用户体验。

摘要由CSDN通过智能技术生成

1.先安装worker-loader。我的版本3.0.8

npm i worker-loader

2.编写你的worker.js （我的命名是a.js）

编写一个比较高的循环，这个计算量级如果不用webworker，页面会卡死大概10-20S左右。在此期间无法对页面进行操作。

onmessage = function (e) {
  // onmessage获取传入的初始值
  let sum = e.data;
  for (let i = 0; i < 90000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
  }
  // 将计算的结果传递出去
  postMessage(sum);
}

3.引入worker.js

import Worker from 'worker-loader!./a.js'

引入路径直接写在 worker-loader! 后面

直接调用就可以

  methods: {
    
    
    makeWorker() {
      // 获取计算开始的时间
      let start = performance.now()
      // 新建一个线程
      let worker = new Worker()
      // 线程之间通过postMessage进行通信
      worker.postMessage(0)