首页 > 开发 > 前端 > 正文

HTML 5 Web Workers

2016-07-31 22:43:40  来源:极客头条
什么是Web Worker?  web worker 是运行在后台的 JavaScript,不会影响页面的性能。
Web Worker有什么用?  JavaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。随着电脑计算能力的增强,尤其是多核CPU的出现,这一点带来很大的不便,无法充分发挥JavaScript的潜力。
Web Worker的目的,就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作。这样做的好处是,一些高计算量或高延迟的工作,被worker线程负担了,所以主进程(通常是UI进程)就会很流畅,不会被阻塞或拖慢,可以提高应用的总体性能,并且提升用户体验。
Web Worker的特点  Web Worker有以下几个特点:
同域限制。子线程加载的脚本文件,必须与主线程的脚本文件在同一个域。DOM限制。子线程所在的全局对象,与主进程不一样,它无法读取网页的DOM对象,即document、window、parent这些对象,子线程都无法得到。(但是,navigator对象和location对象可以获得。)脚本限制。子线程无法读取网页的全局变量和函数,也不能执行alert和confirm方法,不过可以执行setInterval和setTimeout,以及使用XMLHttpRequest对象发出AJAX请求。文件限制。子线程无法读取本地文件,即子线程无法打开本机的文件系统,它所加载的脚本,必须来自网络。Web Worker的兼容性  在创建 web worker 之前,请检测用户的浏览器是否支持它:
if(window.Worker){ Yes! Web worker support! // Some code..... }else{ Sorry! No Web Worker support..}  IE10+及所有主流浏览器均支持 web worker。
Web Worker常用API  1.postMessage(data)
子线程与主线程之间互相通信使用方法,传递的data为任意值。
2.message
当有消息发送时,触发该事件。消息发送是双向的,消息内容可通过data来获取。
3.terminate()
主线程中终止worker,此后无法再利用其进行消息传递。注意:一旦terminate后,无法重新启用,只能另外创建。
4.error
出错处理。错误消息可以通过e.message来获取。
Web Worker实例//file:main.js//创建worker子线程var worker = new Worker();//主线程向子线程发送内容worker.postMessage();//主线程通过message事件监听子线程发来的内容worker.onmessage = function(e) { console.log(e.data);};//主线程可以监听子线程是否发生错误。//如果发生错误,会触发主线程的error事件。worker.onerror(function(e) { console.log(e);});//关闭子线程worker.terminate();//file:worker.js//子线程接收消息self.onmessage = function(e){ self.postMessage('You said: ' + e.data);};  worker.js执行的上下文,与主页面执行时的上下文并不相同,最顶层的对象并不是window,而是WorkerGlobalScope,所以无法访问window、与window相关的DOM API,但是可以与setTimeout、setInterval等协作。
WorkerGlobalScope作用域下的常用属性、方法如下:
self
  我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用location
  location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象,它表示用于初始化这个工作线程的脚步资源的绝对 URL,即使页面被多次重定向后,这个 URL 资源位置也不会改变。close
  关闭当前线程,与terminate作用类似 self.close()importScripts
  我们可以通过importScripts()方法通过url在worker中加载库函数XMLHttpRequest
setTimeout/setInterval以及addEventListener  详见JavaScript 标准参考教程