不会吧不会吧！不会还有人没用过WebWorker吧！

众所周知：

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

基本用法：

1.基于HTML、CSS、JS三大金刚来说，这边指路阮大神Blog

Web Worker 使用教程

2.基于Webpack的web worker配置

由于现在主流开发方式都往SPA框架迁移，所以采取传统的new Worker()无法正常构造，这边需要worker-loader插件进行处理。

根据worker-loader的npm文档是可以在wp项目中正常使用worker的，但是笔者all in TS，所以需要针对TS做一定对处理。

具体操作流程如下：

1.引入worker-loader npm包

npm install worker-loader

2.配置loader

{
   test: /\.worker\.(c|m)?js$/i,
   use: [{
      loader: "worker-loader",
   }]
}

3.再声明index.d.ts文件

declare module "worker-loader!*" {
  // You need to change `Worker`, if you specified a different value for the `workerType` option
  class WebpackWorker extends Worker {
    constructor();
  }

  // Uncomment this if you set the `esModule` option to `false`
  // export = WebpackWorker;
  export default WebpackWorker;
}

4.创建*.worker.ts文件

const ctx: Worker = self as any;

// Post data to parent thread
ctx.postMessage({ foo: "foo" });

// Respond to message from parent thread
ctx.addEventListener("message", (event) => console.log(event));

5.主文件引用worker

import Worker from "worker-loader!./Worker";

const worker = new Worker();

worker.postMessage({ msg: 1 });
worker.onmessage = (event) => {};

worker.addEventListener("message", (event) => {});

6.享用worker的异步处理带来的高效性吧！