首页 > 代码库 > Html5之web workers多线程

Html5之web workers多线程

2024-09-15 05:09:09   216人阅读

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 onl oad() {
	 worker.postMessage(40);
 }
 onl oad();
</script>
<body>
sfsdfdsfdsfdfdsf
<input type="text" value="http://www.mamicode.com/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做它自己擅长的事吧。

Html5之web workers多线程


联系
我们