使用 Web Workers

Web Workers API

定义： 

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代

码交由web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。您可以继

续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

语法解析： 

生成一个专用 worker

第一步：在主线程创建一个新的 worker 很简单。你需要做的是调用Worker() 的构造器，指定一个脚本的 URI 来执行 worker 线程

var myWorker = new Worker('worker.js'); //创建Worker

专用 worker 中消息的接收和发送

你可以通过postMessage() 方法和onmessage事件处理函数触发 workers 的方法。当你想要向一个

worker 发送消息时，你只需要这样做

myWorker.postMessage([4, 5, 63, 4])会将这个值组成数组发送给worker

在 worker 中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：

//onmessage=function(e){ console.log(e.data) }  //此函数接收主线程发过来的数据
onmessage = function (e) {
   const data = e.data
   // postMessage() 此方法为响应回主线程的数据
   postMessage(
     data.sort((a, b) => {
       return a - b
     })
   )
}
 
/*
注意： 在主线程中使用时，onmessage和postMessage() 必须挂在 worker 对象上，
而在 worker 中使用时不用这样做。原因是，在 worker 内部，worker 是有效的
全局作用域。
当一个消息在主线程和 worker 之间传递时，它被复制或者转移了，而不是共享。
*/

终止 worker

 如果你需要从主线程中立刻终止一个运行中的 worker，可以调用 worker 的terminate 方法：

myWorker.terminate();

worker 线程会被立即杀死，不会有任何机会让它完成自己的操作或清理工作。

而在 worker 线程中，workers 也可以调用自己的 close  方法进行关闭：

close();