广州web培训
达内广州五羊中心

18589266248

热门课程

JS中的并行处理:Web Workers

  • 时间:2016-12-26 14:22
  • 发布:广州web培训
  • 来源:拿客

Web Worker可能是在JavaScript中唯一可以真正实现多线程的方法了。我们需要按照下面的方式创建worker:

const worker = newWorker("worker.js");

上面达内广州前端开发培训就定义了一个Worker实例,然后你可以通过postMessage与worker通信,就像和iFrame通信一样,只不过不存在跨域的问题,不需要验证跨域。

worker.postMessage(num);

在worker代码中,你需要监听这些事件:

onmessage = (e) => {

// e.data will contain the value passed

};

这种方式是双向的,所以你也可以从worker中postMessage给我们的主程序。

在worker代码中:

postMessage(result);

在主程序中:

worker.onmessage = (e) => {}

这就是worker最基本的用法。

异常处理

在你的worker代码中,有很多种方式来处理异常,比如你可以catch之后通过postMessage传递,这样可能需要多些一些代码,但是确实最有效也最安全的。

另一种方式是用onerror事件,这种方式可以捕捉所有未处理的异常,并且交给调用方来决定如何处理。调用方式很简单:

worker.onerror = (e) => {};

为了调试方便,异常对象中还有一些额外的字段比如:filename,lineno,colno.

回收

将不需要的worker回收是非常重要的,worker会生成真正的操作系统线程,如果你发现与很多worker线程同时运行,你可以通过很简单的杀掉浏览器进程。

你有两种方式杀掉worker进程:在worker里和在worker外。我认为最好的处理worker生命周期的地方是在主页面里,但这也要取决于你代码的具体情况。

杀掉一个worker实例,在外部可以直接调用terminate()方法,这种方法可以立即杀掉它,释放所有它正在使用的资源,如果它正在运行,也会立即终止。

如果你想要让worker自己去管理它的生命周期,可以直接在worker代码中调用stop()方法。

不管使用哪种方法,worker都会停止,销毁所有资源。

如果你想使用一种“一次性”的worker,比如需要做一些复杂运算之后就不再使用了,也要确保在onerror事件中去销毁它们,这样有利于规避一些难以发现的问题。

worker.onerror = (e) => {

worker.terminate();

reject(e);

};

worker.onmessage = (e) => {

worker.terminate();

resolve(e.data);

}

广州Web前端培训就到广州达内,详情请登陆广州达内Web前端培训官网(gz.web.tedu.cn)!

上一篇:JS中的并行处理:行内Workers
下一篇:JS中的并行处理:Webpack

马上预约三天免费体验课

姓名:

电话:

选择城市和中心
贵州省

广西省

海南省