初识Web Workers
HTML5标准中的Web Workers给我们带来了JS多线程的实践。 一、什么是Web WorkersWeb 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有三个比较重要的字段,
5.生成subworkerworker 能够生成更多的 worker,这就是所谓的subworker,它们必须托管在同源的父页面内。并且,subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。 importScripts(); /* 什么都不引入 */ importScripts('a.js'); /* 只引入 "foo.js" */ importScripts('a.js','b.js'); /* 引入两个脚本 */ 注:脚本的下载顺序不固定,但执行时会按照传入? 三、共享worker一个共享worker可以被不同的window、iframe或者worker访问,当然,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。 具体详细内容见后期。 四、执行上下文worker有他自己的上下文环境,所以在worker中有些方法是不能使用的。
五、兼容性新技术在使用时,兼容性总是要考虑的。 caniuse搜索有问题,暂时无图啊。。 注:web worker是浏览器的功能,并不是JS支持多线程。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |