标签：alert 接收 span 共享 cal 数据 div height fdsfdsf
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做它自己擅长的事吧。
标签：alert 接收 span 共享 cal 数据 div height fdsfdsf
原文地址：http://www.cnblogs.com/liguangsunls/p/6717819.html
