web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结、挂起、卡死。

比如:我们要运算一个复杂的数学计算:递归计算。

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
fibonacci(40)

当参数达到40或者以上的时候,页面就会出现明显的卡死现象。这个时候用户就只能等待算计结束才可以做其他操作。这种情况下就适合使用worker开辟新线程来处理这个运算。

main.html页面为主线程

<script>
//开辟一个新线程
var worker = new Worker('worker.js');
worker.postMessage(40) ;
worker.onmessage = function(ev){
console.log(ev);
worker.terminate() //终止一个worker线程
};
</script>
worker.js 开辟的新线程
//新线程
//定义递归函数
var fibonacci =function(n) {
return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};

onmessage = function(ev){
var param = parseInt(ev.data,10) ;
//把地柜函数的计算交给新线程,计算完之后用postMessage把结果传回给主线程
postMessage(fibonacci(param))
}


这样就可以实现主线程和新开辟的线程之间的信息交互。复杂的计算就交给了worker.js。页面不用卡死。新线程会在处理完计算之后把数据传回给主线程(有点异步请求的感觉)。

总结我们可以做什么:

1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

有那些局限性:

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性.