Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面。
1、首先看一个实例:
1)js文件(test.js)
var fibonacci =function(n) { return n <2? n : arguments.callee(n -1) + arguments.callee(n -2); }; onmessage =function(event) { var n = parseInt(event.data, 10); postMessage(fibonacci(n)); };
2)html页面(test.html)
<html> <script type="text/javascript"> var worker =new Worker(‘test.js‘); worker.onmessage =function(evt){ alert(evt.data); } function onload() { worker.postMessage(40); } onload(); </script> <body> sfsdfdsfdsfdfdsf <input type="text" value="abc"></input> <div id="test"> </div> </body> </html>
注意:
1.上面的样例最好放到server上执行。(chrome不支持本地的)
2.上面的样例能够发现,页面会先渲染body中的html内容,在子线程中去运行负责的计算。等子线程计算完成后把结果传递给主线程。
假设不使用web workers,直接把计算部分放到主线程中,那么浏览器处于单线程中,会顺序运行,导致以下的页面无法载入。
2、web workers流程:
WEB主线程:
1.通过 worker = new Worker( url ) 载入一个JS文件来创建一个worker,同一时候返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.能够使用 worker.terminate() 来终止一个worker的运行。
worker新线程:
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
3、web workers知识点:
1.worker.onmessage
绑定主线程的message事件。当worker调用postMessage时方法时。绑定的事件处理程序会被调用到,传递来的数据能够使用MouseEvent的data属性获取,通过target属性还能够获取worker对象
2.self是什么
self是woker中对自身的引用。有些像this
3.close()
在worker内部调用close()方法效果和在外部调用worker实例的terminate()方法效果一样。终止worker执行
4.onmessage
在这个句柄内接收外部调用者传递的參数,參数能够通过e.data获取
5.self.postMessage()
没错通过这种方法我们能够在worker内把结果传递给主线程。主线程上绑定的message事件的处理程序会被调。
6.全新的JavaScript环境
当一个Worker实例被创建的时候,它会在一个全新的JavaScript执行环境中,全然和创建worker的脚本分离开。即使我们传递的消息是引用类型它们也是复制传递的,改动worker中的參数不影响创建脚本中的參数。
7.importScripts()
我们能够通过importScripts()方法通过url在worker中载入库函数,例如以下:
importScripts(‘utility/dialog.js‘,‘common/cookie.js‘);
方法能够接受多个url。相对地址的url以当前worker为參照,方法会依照參数顺序依次下载执行库函数,假设中间某个脚本出错,剩下的都不会被载入和执行,并且这种方法是同步的,仅仅有全部脚本都载入、执行完后才会返回。
注:importScripts方法能够载入跨域的文件。使用worker的构造函数时的js文件仅仅能是同源的。
8.worker运行模型
worker线程从上到下同步执行它的代码。然后进入异步阶段来对事件及计时器响应。假设worker注冊了message事件处理程序,仅仅要其有可能触发,worker就一直在内存中,不会退出,但假设worker没有监听消息。那么当全部任务执行完成(包含计数器)后,他就会退出。
9.web worker中能够使用什么
1)self自身引用
2)能够使用JavaScript的全局对象:JSON、Date()、Array
3)location对象,可是其属性都是仅仅读的。改了也影响不到调用者
4)navigator对象
5)setTimeout()、setInterval()及其相应清除方法
6)addEventListener()、removeEventListener()
7)最后web worker还支持sub worker和共享worker,这方面没有太细致看,浏览器兼容性也不讨理想,有兴趣同学能够上网搜索研究一下。
10.web worker 弱点:
1)在worker中不能使用window对象和docuemnt对象(dom对象),即:不能在主、子线程中共享dom操作。
2)不能跨域载入work的js(在使用work的构造方法时)
3)web worker仅仅能用来载入同域下的json数据,而这方面ajax已经能够做到了,并且效率更高更通用。
还是让Worker做它自己擅长的事吧。