用爱站工具包如何做网站地图,深圳罗湖网站建设公司,怎么生成网站源代码,用自己电脑做服务器 网站吗这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 问题描述#xff1a;最近工作中出现一个需求#xff0c;纯前端下载 Excel 数据#xff0c;并且有的下载内容很多#xff0c;这时需要给下载增加一个 loading 效果。 代码如下#xff1a; // util… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 问题描述最近工作中出现一个需求纯前端下载 Excel 数据并且有的下载内容很多这时需要给下载增加一个 loading 效果。 代码如下 // utils.js
const XLSX require(xlsx)
// 将一个sheet转成最终的excel文件的blob对象然后利用URL.createObjectURL下载
export const sheet2blob (sheet, sheetName) {sheetName sheetName || sheet1var workbook {SheetNames: [sheetName],Sheets: {}}workbook.Sheets[sheetName] sheet// 生成excel的配置项var wopts {bookType: xlsx, // 要生成的文件类型bookSST: false, // 是否生成Shared String Table官方解释是如果开启生成速度会下降但在低版本IOS设备上有更好的兼容性type: binary}var wbout XLSX.write(workbook, wopts)var blob new Blob([s2ab(wbout)], { type: application/octet-stream })// 字符串转ArrayBufferfunction s2ab(s) {var buf new ArrayBuffer(s.length)var view new Uint8Array(buf)for (var i 0; i ! s.length; i) view[i] s.charCodeAt(i) 0xffreturn buf}return blob
}/*** 通用的打开下载对话框方法没有测试过具体兼容性* param url 下载地址也可以是一个blob对象必选* param saveName 保存文件名可选*/
export const openDownloadDialog (url, saveName) {if (typeof url object url instanceof Blob) {url URL.createObjectURL(url) // 创建blob地址}var aLink document.createElement(a)aLink.href urlaLink.download saveName .xlsx || 1.xlsx // HTML5新增的属性指定保存文件名可以不要后缀注意file:///模式下不会生效var eventif (window.MouseEvent) event new MouseEvent(click)else {event document.createEvent(MouseEvents)event.initMouseEvent(click,true,false,window,0,0,0,0,0,false,false,false,false,0,null)}aLink.dispatchEvent(event)
}el-buttonclickclickExportBtn
i classel-icon-download/i下载数据
/el-button
div classmongolia v-ifloadingSummaryDatael-icon classel-icon-loading loading-iconLoading //el-iconploading.../p
/divclickExportBtn: _.throttle(async function() {const downloadDatas []const summaryDataForDownloads this.optimizeHPPCDownload(this.summaryDataForDownloads)summaryDataForDownloads.map(summaryItem downloadDatas.push(this.parseSummaryDataToBlobData(summaryItem)))// donwloadDatas 数组是一个三维数组而 json2sheet 需要的数据是一个二维数组this.loadingSummaryData trueconst downloadBlob aoa2sheet(downloadDatas.flat(1))openDownloadDialog(downloadBlob, ${this.testItem}报告数据)this.loadingSummaryData false
}, 2000),// css
.mongolia {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.9);display: flex;justify-content: center;align-items: center;font-size: 1.5rem;color: #409eff;z-index: 9999;
}
.loading-icon {color: #409eff;font-size: 32px;
}解决方案探究 在尝试了使用 $nextTick、将 openDownloadDialog 改写成 Promise 异步函数或者使用 async/await、在 openDownloadDialog 中添加 loadingSummaryData 逻辑发现依旧无法解决问题因此怀疑是 document 添加新元素与 vue 的 v-if 渲染产生冲突即 document 添加新元素会阻塞 v-if 的执性。查阅资料发现问题可能有以下几种 openDownloadDialog 在执行过程中执行了较为耗时的同步操作阻塞了主线程导致了页面渲染的停滞。 openDownloadDialog 的 click 事件出发逻辑存在问题阻塞了事件循环(Event Loop)。 浏览器在执行 openDownloadDialog 时将其脚本任务的优先级设置得较高导致占用主线程时间片推迟了其他渲染任务。 Vue 的批量更新策略导致了 v-if 内容的显示被延迟。 查阅资料后找到了如下几种方案 1.使用 setTimeout 使 openDownloadDialog 异步执行 clickExport() {this.loadingSummaryData true;setTimeout(() {openDownloadDialog(downloadBlob, ${this.testItem}报告数据);this.loadingSummaryData false;});
}2.对 openDownloadDialog 内部进行优化 避免大循环或递归逻辑 将计算工作分批进行 使用 Web Worker 隔离耗时任务 在编写 downloadWorker.js 中的代码时要明确这部分代码是运行在一个独立的 Worker 线程内部而不是主线程中。 不要直接依赖或者访问主线程的全局对象,比如 window、document 等。这些在 Worker 内都无法直接使用。 不要依赖 DOM 操作,比如获取某个 DOM 元素。Worker 线程无法访问页面的 DOM。 代码执行的入口是 onmessage 回调函数,在其中编写业务逻辑。 和主线程的通信只能通过 postMessage 和 onmessage 发送消息事件。 代码应该是自包含的,不依赖外部变量或状态。 可以导入其他脚本依赖,比如用 import 引入工具函数等。 避免修改或依赖全局作用域,比如定义全局变量等。 总之编写 downloadWorker.js 时要注意它执行在一个独立环境中只能通过消息事件与主线程通信。 // 创建 Worker
const worker new Worker(downloadWorker.js); // 点击下载时向 Worker 发送消息
function clickDownload() {showLoading();worker.postMessage({url: fileURL,filename: report.xlsx});worker.onmessage function(e) {// 收到下载完成的消息hideLoading();}}// 显示 loading
function showLoading() {loading.style.display block;
}// 隐藏 loading
function hideLoading() {loading.style.display none;
}// downloadWorker.jsonmessage function(e) {const url e.data.url;const filename e.data.filename;// 创建并点击链接触发下载const a document.createElement(a);a.href url;a.download filename;a.click();postMessage(下载完成);
}div idloading styledisplay:none;Downloading...
/divbutton onclickclickDownload()Download
/buttonscript srcdownloadWorker.js/script3.使用 requestIdleCallback 进行调度 clickExport() {this.loadingSummaryData true;requestIdleCallback(() {openDownloadDialog(downloadBlob, ${this.testItem}报告数据);this.loadingSummaryData false; });
}当使用上述方案时发现里面的内容变得异常的慢于是去问GPT后得到以下答案 使用 requestIdleCallback 来执行 openDownloadDialog 确实可能会需要更多时间。 因为 requestIdleCallback 会在主线程空闲时才执行回调函数,所以不像 setTimeout 可以直接按指定时间异步执行。 requestIdleCallback 的优先级较低,只在主线程空闲时才会执行,所以 download 的速度会比 setTimeout 慢一些。 但使用 requestIdleCallback 的优点是它不会占用主线程时间,可以避免阻塞页面渲染。 所以需要权衡执行速度和避免阻塞之间的关系: 如果下载速度是优先考虑的因素,可以继续使用 setTimeout 异步执行。 如果避免阻塞渲染更重要,则 requestIdleCallback 是更好的选择。 偶尔下载任务被延迟不是大问题,但频繁的下载任务阻塞会严重影响页面体验。 此外,可以结合两者试试: clickExport() {this.loadingSummaryData true;setTimeout(() {requestIdleCallback(() {openDownloadDialog(downloadBlob);});this.loadingSummaryData false;}, 200);}setTimeout 先异步调度,然后在回调中使用 requestIdleCallback 避免阻塞。这样就可以兼顾下载速度和避免渲染阻塞了。 分析线程模型找到具体的阻塞点 使用 Performance 工具分析线程 debugger 及 console.log 打印关键函数的执行时间 检查是否有非主线程的任务阻塞了主线程 调整 vue 的批量更新策略 new Vue({config: { // 修改批量更新的队列长度batchUpdateDuration: 100 }
})本文转载于: https://juejin.cn/post/7268050036474609683 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
