resolve： 把下载文件这个耗时操作，放在其他线程操作，等到操作完毕，再通知主线程，执行完了。就像发布订阅模式一样，主线程不用执行密集的计算，也不用特意等密集计算的结果，执行完，告诉我就行了

技术使用 Web Workers

摘自 MDN developer.mozilla.org/zh-CN/docs/…

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）。

为什么要用它：worker 的一个优势在于能够执行处理器密集型的运算

而

不会阻塞 UI 线程

不会阻塞 UI 线程

不会阻塞 UI 线程

不会阻塞 UI 线程

重要的事情说三遍 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣

基本使用

主线程生成一个专用 worker

const myWorker = new Worker("worker.js"); // worker.js 是一个脚本的 URI 来执行 worker 线程

专用 worker 中消息的接收和发送

就俩主要方法 postMessage onmessage

引入脚本与库

Worker 线程能够访问一个全局函数 importScripts() 来引入脚本，该函数接受 0 个或者多个 URI 作为参数来引入资源；以下例子都是合法的：

importScripts(); /* 什么都不引入 */
importScripts("foo.js"); /* 只引入 "foo.js" */
importScripts("foo.js", "bar.js"); /* 引入两个脚本 */
importScripts("//example.com/hello.js"); /* 你可以从其他来源导入脚本 */

 ESModule 模式

const worker = new Worker('worker.js', 

    { type: 'module' // 指定 worker.js 的类型 }

 );

文件下载代码

• 
  
• baseCode
  

import { writeFile, utils } from 'xlsx'
/**模拟生成大文件数据 */
const generateLargeFileData = () => {
const data = []
for (let i = 0; i < 10000; i++) {

		data.push({
id: i + 1,
name: `User ${i + 1}`,
email: `user${i + 1}@example.com`,
age: Math.floor(Math.random() * 100) + 1

		})

	}
return data

}

• 
  
• 一只转圈的代码
  

/**下载大文件 */
const downloadExcel = async () => {
// 模拟生成大文件数据
const data = generateLargeFileData()

	loading.value = true
// 模拟一段短暂的等待时间，确保状态更新
await delay(1000)
// 卡死的罪魁祸者
// 将数据转换为 Excel 格式
const ws = utils.json_to_sheet(data)
const wb = utils.book_new()

	utils.book_append_sheet(wb, ws, 'Sheet1')
writeFile(wb, 'test.xlsx')

	loading.value = false

}

• 
  
• 使用webworker，将耗时计算放到 webworker 线程，解决阻塞ui的问题
  

主线程

const myWorker = new Worker('downloadWorker.js')

myWorker.onmessage = (event) => {
let wb = event.data
// 这里也会占用主线程的ui渲染，所以会卡一下
writeFile(wb, 'test.xlsx')
ElMessage.success('下载任务已在后台运行，可以继续操作界面其他任务')

}

/**下载大文件 */
const downloadExcel = async () => {
const data = generateLargeFileData()

	myWorker.postMessage(data)

}

worker 线程

// 非模块化文件, public 打包本身就是线上文件了

importScripts("./xlsx.js"); // 线上地址，或者本地地址

self.onmessage = (e) => {
// 将数据转换为 Excel 格式
const ws = XLSX.utils.json_to_sheet(e.data)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
// writeFile(wb, 'test.xlsx') // 这里会操作dom， 所以将操作dom放到 主线程做
self.postMessage(wb)
self.close() 

}  

细节补充

// main.js（主线程）
const myWorker = new Worker('/worker.js'); // 创建worker 

myWorker.terminate(); // 关闭worker

// worker.js（worker线程） 
self.close(); // 直接执行close方法就ok了

4. 
   
5. worker 错误监听 messageerror
   
6. 关于主线程里的 new Worker('downloadWorker.js')
   

这个脚本，必须是本地/或者网络地址，这里写的是项目运行地址 匹配相应的worker。这里大家也会发现一个问题，就是这个worker是全局性的，放在public 是一个不错的选择，再者打包后，public 下本身也是会放在服务器上

6. 
   
7. 用完worker， 要及时关闭，他是不会自己结束的。选择 在worker 关闭，或者主线程关闭，会有区别
   
8. 其实小文件下载，用worker 有点画蛇添足，本身使用worker 也是一种消耗
   
9. 
   

详细的参考资料以及代码地址

MDN

MDN code仓库

可以下载下来直接调试，最好是起一个本地服务: http-server

代码地址

gitee.com/Big_Cat-AK-…