Web Worker

1、介绍

Web Worker,运行在后台的javascript，不占浏览器自身的线程，独立于其他脚本。
通常来讲javascript是单线程的，js处理逻辑与页面渲染走线程，代码会自上而下执行，可以理解为同步。在html中执行js脚本时，在js脚本加载完成之前，页面的状态是不响应的。我们可以将一些复杂逻辑交给web worker在后台执行，相当于是将部分逻辑异步处理，在这段逻辑处理之间页面依然可以响应用户的操作。
web worker有两种类型，一种是专用线程 dedicated web worker，一种是共享线程 shared web worker;专用线程会随着页面的关闭而关闭，只能在创建它的页面访问。而共享线程可以被多个页面访问，一般用于同浏览器下多页面的通信（必须保证同源策略）

2、专用线程在vue的使用

每一个worker对象都是使用构造函数创建的对象。主程序通过worker对象的postMessage(obj)发送数据,可以发送对象；通过worker对象的onmessage(data)接收数据；而子线程worker.js需要设置onmessage(obj) 来接收主程序发送的数据，处理完成之后使用postMessage(data)将处理好的数据发送给主程序。子线程中也有错误信息的监听方法onerror()
以vue-cli 3.x为例子
(1) 需要下载worker-loader,并且在vue.config.js中配置worker.js文件能被读取

chainWebpack(config) {
      // set worker
      config.module
      .rule("worker.js")    // 读取worker.js结尾的js
      .test(/\.worker\.js$/)  // 正则匹配
      .use('worker-loader')  // 使用worker-loader
      .loader('worker-loader')
      .options({
        inline: true,
        name: 'workerName.[hash].js'
      })
}

(2) 创建子线程 webworker.worker.js，设置onmessage、onerror方法

onmessage = function(evt){
  //工作线程接收到主线程的消息,处理逻辑
 let arr = evt.data
 let name = '';
 arr.forEach(element => {
   name = element.name
 });
 
 //向主线程发送消息
 postMessage(name);
};

//错误信息
onerror = function (event) {
 console.log(event.message);
}

(3) 在主程序中引入子线程，并且创建实例，使用worker对象发送与接收数据

import WorkerSetss from '@/static/webworker.worker.js'
     this.worker = new WorkerSetss();
     //向工作线程发送消息
     let arr = [];
     let obj = {};
     obj.name = "小明"
     obj.id = "1"
     arr.push(obj)
     this.worker.postMessage(arr);
     this.worker.onmessage = function(event) {
        console.log(event)
      }

备注：
(1) 只能用于单个页面，不能出现跨页面的情况。
(2) 有浏览器的兼容问题。