WebWorker 简单使用方式

2018-12-28 08:04:12来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

WebWorker 一定程度上可以算得上是浏览器中的多线程技术了,在项目中适当使用 Worker 来做一些耗时的操作能大大提高页面整体流畅度。

Worker的使用也是非常简单的,通过向 Worker 构造函数传递需要在worker中运行的文件路径作为参数,就可以使得对应的文件运行在worker线程。

Worker线程中没有 window 对象,也没有 document 对象。既不能操作也不能创建 DOM。而且 worker 线程和主线程只能通过消息机制来通信。

下面是一个 WebWorker 的简单用法:

首先需要创建一个 Worker 实例:

var worker = new Worker('worker.js');

在 worker.js 中写下如下代码:

1 console.log('Hello world');

然后 worker.js 就会在 worker 线程中运行,这也就意味着这里的代码不管是什么,基本上可以认为对主线程(也就是浏览器线程)没有任何影响。虽然实际上电脑跑的东西越多性能越差,但至少主线程不会被阻塞。

无法跟主线程交互的代码用处非常有限,当然,你可以绕过去,直接大家都走服务器端结合 WebSocket 来实现跟主线程,但 WebWorker 本身能跟主线程通过消息机制来交互确实会更方便些,如果再允许提交对于 DOM 的操作就更好了。

WebWorker 通过 postMessage 来发送消息,通过 message 事件来接受接收消息。其中发送的数据就在 event.data 中。

比如上面的代码,由于 worker.js 是通过主线程的代码加载的,所以执行顺序定然晚于主线程的代码执行,当 worker.js 中的代码执行后,可以通过向主线程发送一个消息,告诉主线程一切就绪,可以开始开始正常交互了.

这里需要知道的就是 在 worker 中没有 window 实例,也没有全局的 this,但是却有着 WorkerGlobalScope 也就是 self,当前 worker 自己。

1 self.postMessage('ready');

在主线程中通过事件处理程序接收消息

1 worker.addEventListener('message', function (event) {
2     console.log(event.data);
3 });

另外,所有跟 worker 线程交互的代码也最好在收到 ·ready· 这个消息之后进行。因为此时 worker 线程已经就绪,而且可以在发送 ready 消息之前把必备的准备工作做好。

还有就是消息不要真的就发送简单的字符串,除非系统里面确实就是这种需求,最好设计下数据结构,采用统一的方式来做消息交互,比如类似下面这样或者别的方式都行:

{
    cmd: '',
    payload: ...
}

要进行错误处理,在主线程和在 worker 中做法很相似,都是添加 “error”事件处理程序,不同的是用 worker 实例还是 WorkerGlobalScope 也就是 self。

1 worker.addEventListener('error', function (event) {
2     console.log('在主线程内监听 worker 实例的错误');
3 });
4 
5 self.addEventListener('error', function (event) {
6     console.log('在 worker 线程内监听当前 worker 的错误');
7 });

类似在 html 文档中可以使用 <script> 标记导入外部脚本,在 worker 里面也可以导入外部脚本,用法如下:

1 importScripts('script1.js', 'script2', ....);  // 可以导入一个到多个,省略号不是代码,这行只算是伪代码

最后用完了 worker 就可以把它关闭了,在主线程中用 terminate,在 worker 线程中直接用用 close 就可以了,用不到时就应该即使关闭,多少能省点系统资源。

1 worker.terminate(); // 在主线程中关闭当前 worker
2 self.close(); // 在 worker 中关闭自己

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:一段简单的显示当前页面FPS的代码

下一篇:撩课-Web大前端每天5道面试题-Day20