当前位置：首页 > wzjs >正文

青岛胶南做网站的有多少下载百度极速版

wzjs 2025/8/8 18:24:58

青岛胶南做网站的有多少,下载百度极速版,b2b网站系统开发需要多久,国家工商总局官网前端web worker提升性能实战案例 Web Worker 的特点多线程：Web Worker 运行在独立的线程中，不会阻塞主线程。通信机制：Worker 和主线程之间通过 postMessage 和 onmessage 进行通信。限制：Worker 不能直接操作 DOM。 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);
})