易语言编程可以做网站么,网站备案流程,郑州网站关键词优化公司哪家好,云虚拟主机可以做多少个网站theme: channing-cyan hightlight: channing-cyan
前言
在我们公司表格数据导出都是前端去处理。一开始数据量不大#xff0c;倒没什么问题。但随着数据量的加大#xff0c;问题也逐渐暴露出来。
一天的数据量有一来万条#xff0c;导出一定时间范围的数据#xff0c;30…
theme: channing-cyan hightlight: channing-cyan
前言
在我们公司表格数据导出都是前端去处理。一开始数据量不大倒没什么问题。但随着数据量的加大问题也逐渐暴露出来。
一天的数据量有一来万条导出一定时间范围的数据30天就得30来万条数据。
那会测试直接给我导出 60 万条数据都存到一个 Excel 表中页面直接卡死掉动都动不了后面直接崩溃掉。
那会为什么导出选择由前端去做呢
多语言问题有些内置数据如文件分类计算机组等信息需要支持多语言以及表格 header 头。数据转换问题有些内置数据返回的是数值类型需要转成对应的真正的数据。导出表格字段问题用户可以通过切换列来控制具体导出哪些字段。
排除原因
经过排查导出大量数据通常涉及大量的计算、DOM 操作或文件生成等复杂操作这些操作会在主线程中执行。如果这些操作耗时过长主线程会被阻塞导致页面无法响应用户交互如点击、滚动等表现为页面卡死。
那是否把这些大量的计算、DOM 操作或文件生成等复杂操作放到子进进程去处理不就解决了吗
这就说到了今天的主角Web Workers
Web Workers 介绍
Web Workers 使得一个Web应用程序可以在与主线程分离的后台线程中运行一个脚本。
这样做的好处在于可以在一个单独的线程中执行费时的处理任务从而允许主通常是UI线程运行而不被阻塞。 它的作用就是给JS创造多线程运行环境允许主线程创建worker线程分配任务给后者主线程运行的同时worker线程也在运行相互不干扰在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行这样主线程就会变得轻松不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力而是浏览器作为宿主环境提供了JS一个多线程运行的环境。 不过因为worker一旦新建就会一直运行不会被主线程的活动打断这样有利于随时响应主线程的通性但是也会造成资源的浪费所以不应过度使用用完注意关闭。或者说如果worker无实例引用该worker空闲后立即会被关闭如果worker实列引用不为0该worker空闲也不会被关闭。 Web Workers 使用
创建 Worker 对象通过 new Worker(url) 创建一个 Worker 对象这里的 url 指向你预先编写的 JavaScript 文件路径这个文件内包含 Workers 将要执行的脚本内容。发送消息你可以使用 worker.postMessage(message) 方法从主脚本向 Worker 发送数据。处理 Worker 发送的消息在主脚本中设置 worker.onmessage 事件监听器来处理 Worker 发回来的数据。终止 Worker如果不再需要 Worker可以调用 worker.terminate() 方法来停止 Worker。监听错误可以通过添加 onerror 事件监听器来处理 Worker 中可能出现的错误。
主线程脚本 const myWorker new Worker(worker.js)const nums [10, 20]myWorker.postMessage(nums)myWorker.onmessage function(e) {result e.dataconsole.log(主进程接收子进程传递回来的数据, e.data)// 停止 Workerworker.terminate()}myWorker.onerror function(e) {console.log(监听错误)}Worker 脚本
onmessage function(e) {var data e.data;var result data[0] * data[1];postMessage(result);
}Web Workers 实战 Excel 导出
基本案例有了但还是遇到一些坑。下面开始一个个填坑。
问题1vue 项目如何配置 web worker
这里需要下载第三方 loader, 来编译 workers 脚本。
npm install worker-loader3.0.8
接下来修改 vue.config.js 文件
// vue.config.js
module.exports {chainWebpack(config) {config.module.rule(worker).test(/\.worker\.js$/).use(worker-loader).loader(worker-loader).options({}).end() }
}
注意test() 设置了文件名后缀是 .worker.js 则为 worker 脚本文件。
到这里第一个问题就解决了。。。 问题2修改了 web worker 后重新编译打包没有生效
vue项目一改动到代码文件就会重新编译。
但在调试过程中修改了 worker 脚本发现一直没有修复到问题一开始也是很怀疑自己是不是逻辑出错了。
通过 debug 才发现代码一直没有修改。
后面每次修改 worker 脚本都会重新启动 vue 项目一开始问题是解决了。
但偶尔还是会没有修改到代码。
最终排查到原来是每次重新编译时要删除掉 node_modules 目录下的 .cache 文件夹
才会重新加载新 worker 脚本代码
问题3主进程向子进程发送参数时若参数存在对象会报错
这里主要是生产 csvData 数据key: value中的 value 是一个对象结构时发送给到 子进程浏览器会报错。
这里解决方法是将 value 进行序列化处理
// * 判断 csvData 中的值是否存在对象需要序列化处理
const keys csvHeader.map(item item.key)
csvData csvData.map(row {return keys.reduce((acc, prev) {acc[prev] typeof row[prev] object ? JSON.stringify(row[prev]) : row[prev]return acc}, {})
})问题4在子进程中下载文件失败
由主进程去结合实际业务逻辑生成 csvHeader、csvData 数据后发送给到子进程由其生成 Excel 文件流并下载下来。
// 主进程
const { csvHeader, csvData } generateExcelData(data)// 子进程
import Excel from exceljs
self.onmessage async function(e) {const { csvData, csvHeader } e.dataconst workbook new Excel.Workbook()const worksheet workbook.addWorksheet(My Sheet)worksheet.columns csvHeadercsvData.forEach(row worksheet.addRow(row))// 生成 Excel 文件的 Bufferconst excelBuffer await workbook.xlsx.writeBuffer()// TODO 下载文件
}
经过调试发现文件下载不下来查阅资料得出
主要原因在于 Web Workers 的设计限制。具体来说Web Workers 没有直接访问浏览器的 DOM 和一些与用户界面交互的功能包括文件下载。
所以这里只能将 Excel 文件的 Buffer转成blog发送给到主进程进行文件下载。 主进程
import { saveAs } from file-saver
import ExportWorker from ./export.worker.js
const worker new ExportWorker()
worker.postMessage({csvData: csvData,csvHeader: csvHeader
})worker.onmessage async(e) {const { chunk: blog } e.datasaveAs(blog, filename)
}worker 脚本
import Excel from exceljsself.onmessage async function(e) {const { csvData, csvHeader } e.dataconst workbook new Excel.Workbook()const worksheet workbook.addWorksheet(My Sheet)worksheet.columns csvHeadercsvData.forEach(row worksheet.addRow(row))// 生成 Excel 文件的 Bufferconst excelBuffer await workbook.xlsx.writeBuffer()const blob new Blob([excelBuffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet })self.postMessage({ chunk: blob })
}源码
主进程
import { saveAs } from file-saver
import ExportWorker from ./export.worker.js
/**
* 导出数据为 XLSX通过 web Worker
* param {Object} csvHeader XLSX 头
* param {Array} csvData 数据
* param {String} filename 文件名
*/
const exportDataToXLSXByWorker (csvHeader, csvData, filename) {const worker new ExportWorker()// * 判断 csvData 中的值是否存在对象需要序列化处理const keys csvHeader.map(item item.key)csvData csvData.map(row {return keys.reduce((acc, prev) {acc[prev] typeof row[prev] object ? JSON.stringify(row[prev]) : row[prev]return acc}, {})})worker.postMessage({csvData: csvData,csvHeader: csvHeader})worker.onmessage async(e) {const { chunk: blog } e.datasaveAs(blog, filename)}
}worker 脚本
import Excel from exceljsself.onmessage async function(e) {const { csvData, csvHeader } e.dataconst workbook new Excel.Workbook()const worksheet workbook.addWorksheet(My Sheet)worksheet.columns csvHeadercsvData.forEach(row worksheet.addRow(row))// 生成 Excel 文件的 Bufferconst excelBuffer await workbook.xlsx.writeBuffer()const blob new Blob([excelBuffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet })self.postMessage({ chunk: blob })
}
