通过子线程优化大量数据处理导致页面卡死

背景: 在做批量数据导出的时候,后台返回的数据量大约6w多条,因为需要对这些数据进行构造成需要导出的格式,所以需要对这些数据做遍历计算,在计算的过程中会导致页面卡顿甚至卡死.

原因: JS是一个单线程的语言,在处理大量数据计算的操作下会导致主线程被占用,Vue中的虚拟Dom计算,UI渲染等操作都被阻塞,导致浏览器渲染出现卡顿.

解决方案: 通过new Work将大量的计算操作等交给子线程进行处理,避免主线程被占用,等子线程完成计算操作后,通知主线程并传递计算结果.

项目技术栈: Vue2 + VueCli

使用步骤

// 1.安装worker-loader
npm install worker-loader -D

// 2.webpack配置
config.module
    .rule('worker') 
    .test(/.worker.js$/)
    .use('worker-loader')
    .loader('worker-loader')
    .options({ inline: 'no-fallback', });
 
// 3.创建自己的xxx.worker.js文件,我上面的webpack配置处理1⃣️.woeker.js结尾文件
// xxx.worker.js
self.addEventListener('message', (event) => { 
    // 主进程传递过来的数据存储在event.data对象中 
    const { queryData } = event.data; 
    ...对数据进行处理 
    // 将处理完成后的数据发送给主进程
    self.postMessage(downData, downTitle); });
    
// 4.在需要使用worker的地方引入自己创建的xx.worker.js文件
    import Work from "./xxx.worker.js"
    
    mounted() {
     this.worker = new Work();
     // 注册监听函数，接收子线程消息
     this.work.onmessage = (event) => {
     // ....接收到子线程处理完的数据后进行后续操作
     }
    }
// 5.在需要使用的地方进行消息发送,将数据发送给子线程进行处理
    this.worker.postMessage({ data, queryData });
    
// 6.在组件销毁前关闭子线程
beforeDestroy() { 
    this.worker.terminate();
},