Web Worker

Web Worker

背景

JS是单线程，同一个时刻只能做一件事，如果有多个同步计算任务执行，会造成阻塞。

webworker定义

为JS创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。

基本API

const worker = new Worker(aURL,options)

• worker.postMessage: 向 worker 的内部作用域发送一个消息，消息可由任何 JavaScript 对象组成

• worker.terminate: 立即终止 worker。该方法并不会等待 worker 去完成它剩余的操作；worker 将会被立刻停止

• worker.onmessage:当 worker 的父级接收到来自其 worker 的消息时，会在 Worker 对象上触发 message 事件

• worker.onerror: 当 worker 出现运行中错误时，它的 onerror 事件处理函数会被调用。它会收到一个扩展了 ErrorEvent 接口的名为 error 的事件

应用场景

管理系统--- table表格的导出功能

• 第一种方案：主线程导出 通过exceljs构建表格相关的参数，传入相关的数据，然后转换为blob流，最后通过file-save导出
• worker线程导出 通过ExcelWokrer创建worker线程，通过postmessage向worker线程传递相应的excel数据，在worker线程中通过exceljs构建表格相关数据，然后转换为blob流，接着将生成的blob流通过postmessage传回来主线程，最后通过file-save导出

<div>
  <table dataSource={dataSource} columns={columns}/>
</div>

const dataSource = []
for(let i = 1;i<30000;i++){
 dataSource.push({
   key:i,
   name:`name-${i}`,
   age:12
 })
}

const columns =[  {  title:'姓名',  dataIndex:'name',  key:'name'  },    {  title:'年龄',  dataIndex:'age',  key:'age'  }  ]

// excel.worker.ts
import ExcelJS from 'exceljs';
​
// onmessage事件
onmessage = function (e) {
  const {
    data: { columns, dataSource },
  } = e;
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表
  const worksheet = workbook.addWorksheet('sheet1');
​
  // 设置表格内容
  const _titleCell = worksheet.getCell('A1');
  _titleCell.value = 'Hello ExcelJS!';
​
  const workBookColumns = columns.map((item) => ({
    header: item.title,
    key: item.key,
    width: 32,
  }));
  worksheet.columns = workBookColumns;
  worksheet.addRows(dataSource);
​
  // 导出表格
  workbook.xlsx.writeBuffer().then((buffer) => {
    let _file = new Blob([buffer], {
      type: 'application/octet-stream',
    });
    // 将获取的数据通过postMessage发送到主线程
    self.postMessage({
      data: _file,
      name: 'worker test',
    });
    self.close();
  });
};