·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解8:woker多线程教你如何避免页面卡死

时间:2017-03-06 14:21web前端教程
web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结、挂起、卡死

 

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.不是每个浏览器都支持这个新特性.

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器