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();