前端web worker提升性能实战案例

前端web worker提升性能实战案例

Web Worker 的特点
多线程：Web Worker 运行在独立的线程中，不会阻塞主线程。
通信机制：Worker 和主线程之间通过 postMessage 和 onmessage 进行通信。限制：Worker 不能直接操作 DOM。
Worker 不能使用 window 对象或某些浏览器 API（如 alert、document 等）。Worker 脚本必须与主线程脚本同源（相同协议、域名和端口）。

前端使用web worker开启多线程让计算量的的内容在单独线程运行解决主线程卡死的问题

vue项目代码如下：

demo.vue页面内容<div class="operationOrderClass"><div class="titleMain">订单查询列表</div><input type="text"><el-button type="text" @click="exportExcel">导出</el-button></div>

demo.vue页面js内容
import * as XLSX from 'xlsx';//npm i xlsx下载export default{methods:{exportExcel(){console.time('timeFN'); // 打印执行时间let wr=new Worker('/worker.js');//Worker 脚本必须与主线程脚本同源console.log('wr=',wr);console.log('导出');let arr=[];for(let i=0;i<100000;i++){arr.push({enterpriseName: "测试企业"+i,projectName: "测试项目"+i,guaranteeNo: "测试保函编号"+i,payAmount: "测试金额"+i,merchantName: "测试机构"+i,orderStatus: "测试状态"+i,updatedTime: "测试更新时间"+i,})}console.log('arr=',arr);wr.postMessage(arr);wr.addEventListener('message',function(e){console.log('e=',e.data);// 生成 Excel 文件并触发下载 将e.data写入名为data.xlsx的文件XLSX.writeFile(e.data, 'data.xlsx');//这步骤需要放到主线程 因为可能需要操作  dom worker无法操作domconsole.timeEnd('timeFN'); // 打印执行时间})},// 导出}
}

worker.js

importScripts('/xlsx.full.min.js'); // importScripts 是 Worker 中特有的方法，用于同步加载并执行外部 JavaScript 文件 先使用cdn下载放到vue项目的public文件夹中 xlsx.full.min.js
self.addEventListener("message", function (e) {let arr = e.data;// 将 JSON 数据转换为工作表const ws = XLSX.utils.json_to_sheet(arr);// 创建一个新的工作簿const wb = XLSX.utils.book_new();// 将工作表添加到工作簿中，并命名为'Sheet1'XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 发送工作簿给主线程self.postMessage(wb);
})

通过以上代码可以将10万级别的大文件数据，处理生成文件并下载下来，在生成Excel过程中可以将主线程空闲做表单输入等其他事情而不阻塞主线程执行页面或其他js操作；如果没有web worker主线程下载10万的表格数据处理需要3.5s，这期间是阻塞主线程的；