Html5之web workers多线程

当前位置 : 首页 > 网页制作 > html5 > Html5之web workers多线程

Html5之web workers多线程

来源: 作者: 时间:2016-01-14 17:05
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。1、首先看一个实例:1)js文件(test js)var fibonacci =function(n)

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)

 

 


<script type=text/javascript>|r|
var worker =new Worker('test.js'); |r|
worker.onmessage =function(evt){ |r|
alert(evt.data);|r|
}|r|
function onload() {|r|
worker.postMessage(40);|r|
}|r|
onload();|r|
</script>sfsdfdsfdsfdfdsf 
 
注意:

 

1.上面的例子最好放到服务器上运行。(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做它自己擅长的事吧。

 

Tag:
网友评论

<