webworker

众所周知，js一直被说不擅长计算确实，计算是同步的，大规模的计算会让is主线程阻塞，主线程阻塞的结果就是界面完全卡死一样。
异步只是把任务发布出去等着，后面还是会拉到主线程执行的，异步不可能在异步他始终会卡死你的队列自己执行。所以一个耗时很高的操作，无论你做不做异步，页面

总结：js异步是始终要回到主线程的，webworker是不需要回到主线程，它自己创建一条线程自己去操作，这样主线程就可以不用管它，等它计算完了后，它可以主动把计算结果发给主线程（得主动发，不然收不到）



不能在本地文件夹，必须放到线上地址去，一般可以放到public里面去

list.js代码：

11

HomeView.vue代码：

  new Worker("http://127.0.0.1:5173/list.js")

使用方法：
new Worker(js文件)

注意事项：
webworker不能使用本地文件，必须是网络上的同源文件

webworker不能使用window上的dom操作，也不能获取dom对象，dom相关的东西只有主线程有。只能做一些计算相关的操作

有的东西是无法通过主线程传递个子线程的，比如方法，dom节点，些对象里的特殊设置(freeze，getter，setter这些，所以vue的响应式对象是不能传递的)

模块的引入问题

因为webworker的限制，就别想着多线程渲染dom了。因为他根本无法创建dom，所以vue和react框架没有考虑webworker，webworker的常见主要就是耗时的计算
1，随着webgl，canvas等能力的加入，web前端有越来越多的可视化操作。比如在线滤镜，在线绘图，web游戏等等。这些东西都是非常消耗计算的
2，一些后台管理系统也会涉及到一些，最常见的就是一些电子表单。大量的数据大量的计算比如10万条数据导出为excel表格

以例举导出10万条数据为例子：
 

<script setup>
import { writeFile,utils } from 'xlsx';
let arr = [ ]
for (let i = 0; i <= 100000; i++){
  arr.push({
    id:i,
    name:'张三'+i+'号',
    location:'xxx大道' + i + '号',
    age: i,
    a:i*2
  })
}

function exportExcel() {
  console.log('123');
  const sheet = utils.json_to_sheet(arr);
  const workbook = utils.book_new();
  utils.book_append_sheet(workbook, sheet, 'Sheet1');
  writeFile(workbook,"test.xlsx")
}
</script>
<template>
  <div>
    <input type="text" name="" id="">
    <button @click="exportExcel">导出</button>
  </div>
</template>
<style>

</style>

上述代码中，点击导出，页面直接卡住，input框也用不了，
下面是修改后的代码：
 

<script setup>
import { writeFile } from 'xlsx';

// let work1 = new Worker("http://127.0.0.1:5173/excelwork.js")
let work1 = new Worker("http://127.0.0.1:5173/about/excelwork.js")
work1.onmessage = function (e) {
  let workbook = e.data;
  console.log(workbook);
  writeFile(workbook,'text.xlsx')
}
function exportExcel() {
  work1.postMessage("");
}
</script>
<template>
  <div>
    <input type="text" name="" id="">
    <button @click="exportExcel">导出</button>
  </div>
</template>
<style>

</style>

work部分：
 

let arr = []
importScripts('./xlsx')
for (let i = 0; i <= 100000; i++){
  arr.push({
    id:i,
    name:'张三'+i+'号',
    location:'xxx大道' + i + '号',
    age: i,
    a:i*2
  })
}
self.addEventListener("message",(e) => {
  const sheet = XLSX.utils.json_to_sheet(arr);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  self.postMessage(workbook);  
})