HTML5标准中的Web Workers给我们带来了JS多线程的实践。
一、什么是Web Workers
Web Worker让JS可以创建子线程来处理逻辑与计算,并保证页面对于用户的响应。因此,我们可以使用Web Workers处理一些比较耗CPU的计算。
比如:
index.html中: <body> <div id="box">0</div> </body> <script> var oBox = document.getElementById('box'),worker = new Worker('./worker.js'); worker.onmessage = function(e) { oBox.innerText = e.data; } </script> work.js: var num = 0; setInterval(function() { num++; postMessage(num); },1000);
这样,我们实现了一个每秒递增的类计时器。整个计算过程是在新建的线程中实现的,在每次计算后,将结果抛给主线程。也就是index中的js线程。
注:本地运行不行的话,需要启个服务器。
二、专用worker
前面的例子是专用worker的例子。专用worker,即是一个仅仅能被生成他的脚本所使用的worker,与他相对的是一个可以被多个脚本使用的共享worker,这个将在后面介绍。
1.生成专用worker
前面的例子也用到了,只要调用Worker()的构造函数就行了,
var worker = new Worker('./worker.js');
2.消息的接受和发送
主线程中:
worker.postMessage({value: 0});
此时会向worker线程发送一个键是value,值是0的对象。而在线程中可以写一个事件处理函数来处理这个事件:
专用线程中:
var num = -1; onmessage = function(e) { num = e.data.value; start(); // 调用某个函数 } function start() { setInterval(function() { num++; postMessage(num); },1000); }
start函数中,设置了一个定时器,每次对num加一,并且通过postMessage返回给主线程。在worker中,worker是有效的全局作用域,所以处理事件可以直接书写。
而主线程中可以通过onmessage事件获取worker中返回的数据。
worker.onmessage = function(e) { oBox.innerText = e.data; }
这样,我们就可以看到一个每秒递增一的页面。
注:作为参数传递给worker构造函数的URI必须遵循同源策略 。
3.终止线程
在主线程中,我们可以调用worker的terminate()方法:
worker.terminate();
而在worker中,我们可以直接调用自己的close()方法:
close();
4.处理错误
当线程中出现error时,我们可以通过onerror函数获取错误信息。
worker.onerror = function(e){ // 中断子线程 worker.terminate(); }
该事件不冒泡且可以被取消(preventDefault()方法阻止默认事件)。
错误时间event有三个比较重要的字段,
- message: 错误消息内容。
- filename: 发生错误的脚本文件名。
- lineno: 发生错误时所在脚本文件的行号。
5.生成subworker
worker 能够生成更多的 worker,这就是所谓的subworker,它们必须托管在同源的父页面内。并且,subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。
importScripts(); /* 什么都不引入 */ importScripts('a.js'); /* 只引入 "foo.js" */ importScripts('a.js','b.js'); /* 引入两个脚本 */
注:脚本的下载顺序不固定,但执行时会按照传入 importScripts()
中的文件名顺序进行。这个过程是同步完成的;直到所有脚本都下载并运行完毕, importScripts()
才会返回。
三、共享worker
一个共享worker可以被不同的window、iframe或者worker访问,当然,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。
具体详细内容见后期。
四、执行上下文
worker有他自己的上下文环境,所以在worker中有些方法是不能使用的。
- worker最顶层的不是window对象,所以所有window下的属性方法如alert、DOM API等这些都是不能使用的,但是setTimeout和setInterval是可以使用的。
- location和navigator的部分属性。
- worker中是可以访问XMLHttpRequest()对象的,所以Ajax请求是允许的。
- 主线程和worker之间传递消息时,只是复制或转移了值,而不是共享。
五、兼容性
新技术在使用时,兼容性总是要考虑的。
caniuse搜索有问题,暂时无图啊。。
注:web worker是浏览器的功能,并不是JS支持多线程。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。