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

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

   Web Worker 的特点
多线程：Web Worker 运行在独立的线程中，不会壅闭主线程。
通信机制：Worker 和主线程之间通过 postMessage 和 onmessage 举行通信。限制：Worker 不能直接操作 DOM。
Worker 不能使用 window 对象或某些浏览器 API（如 alert、document 等）。Worker 脚本必须与主线程脚本同源（相同协议、域名和端口）。
  前端使用web worker开启多线程让计算量的的内容在单独线程运行解决主线程卡死的问题

vue项目代码如下：

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

复制代码

1. demo.vue页面js内容
2. import * as XLSX from 'xlsx';//npm i xlsx下载
3. export default{
4. methods:{
5.           exportExcel(){
6.               console.time('timeFN'); // 打印执行时间
7.               let wr=new Worker('/worker.js');//Worker 脚本必须与主线程脚本同源
8.               console.log('wr=',wr);
9.               console.log('导出');
10.               let arr=[];
11.               for(let i=0;i<100000;i++){
12.                 arr.push({
13.                   enterpriseName: "测试企业"+i,
14.                   projectName: "测试项目"+i,
15.                   guaranteeNo: "测试保函编号"+i,
16.                   payAmount: "测试金额"+i,
17.                   merchantName: "测试机构"+i,
18.                   orderStatus: "测试状态"+i,
19.                   updatedTime: "测试更新时间"+i,
20.                 })
21.               }
22.               console.log('arr=',arr);
23.               wr.postMessage(arr);
24.               wr.addEventListener('message',function(e){
25.                 console.log('e=',e.data);
26.                 // 生成 Excel 文件并触发下载 将e.data写入名为data.xlsx的文件
27.                 XLSX.writeFile(e.data, 'data.xlsx');//这步骤需要放到主线程
28.                 因为可能需要操作  dom worker无法操作dom
29.                 console.timeEnd('timeFN'); // 打印执行时间
30.               })
31.             },// 导出
32.          }
33. }

复制代码

worker.js

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。