Web Worker的使用，开启子线程

众所周知，Javascript是单线程。

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。

我们可以将一些与用户界面的dom操作无关的操作，放入Web Worker中运行，避免阻塞。

注：在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。然而你可以使用大量window对象之下的东西。

Web Worker的使用分为主线程和子线程。

主线程

你的项目中任何一个写js代码的地方，worker.js为你创建的子线程文件。放在webpack项目中找不到，需要放到根目录。

// 1.  创建一个Worker实例
var worker = new Worker("./worker.js");

// 2.发送消息给子线程
worker.postMessage({ name: "monkey" });

// 3.接收子线程数据
worker.onmessage = event => {
	console.log("接收子线程数据", event.data);
};

// 4.当 Worker 对象接收到一条无法被反序列化的消息时， messageerror 事件将在该对象上被触发。
worker.onmessageerror = event => {
	console.log(event);
};

// 5.Worker的error事件触发并冒泡时执行。
worker.onerror = event => {
	console.log("There is an error with your worker!");
};

// 6.主线程中断与子线程通信
worker.terminate();

子线程

在根目录创建一个js文件，如果是vue项目，可以放在public文件夹内。

// 1.接收主线程发来的消息，一旦主线程发送消息，该事件即被触发。
onmessage = event => {
  console.log("接收主线程消息", event.data);
};

// 2.接收到一条无法被序列化的消息时，会触发这个事件。
onmessageerror = event => {
  console.log("接收到一条无法被序列化的消息");
};

// 3.发送消息给主线程,msg是要发送给主线程的数据。主线程可以通过onmessage方法回调参数获取到数据。
postMessage(msg);

// 4.引入其他js
importScripts('foo.js')

// 5.终止与主线程通信
close()