浏览器线程模型
在做网页设计时，常常会碰到浏览器像睡着了一样没反应，这个情况大部分是因为浏览器有好几个工作线程在忙活。比如JavaScript引擎线程，就是用来运行JavaScript代码的，它就像个专注的老师；再比如GUI渲染线程，它主要负责表现出浏览器的样子，什么时候需要改变界面或者重新绘制它就会出现；最后还有一个叫浏览器事件触发线程，它的任务是处理各种各样的事情，除了JavaScript引擎执行的代码，还包括各种浏览器自身的工作。
JavaScript引擎与GUI渲染互斥
在浏览器里，JavaScript引擎干活儿的时候，GUI渲染线程得等会儿才能动。如果一段JS代码把处理器占久了，那它就会让浏览器的GUI变得卡顿，后面的事也就反应不过来了，浏览器就像死机似的。
DOM操作影响事件响应
还有，如果你的JS脚本里有很多对DOM的操作，可能会让事件反应变慢，甚至让浏览器卡住不动。而且，当JS运行完了以后，浏览器还会先做一次GUI渲染再去干别的事情。所以，在IE6这样的老版浏览器里面塞太多HTML的话，可能会让网页卡得动不了喔！
死循环与递归操作
当你看到那个”脚本运行太久了”的小窗口时，就说明你的JavaScript脚本里可能有无限循环或者太深度的递归运算在运行着。这两种情况都让电脑CPU浪费在同一个地方，别的事情也不能好好做。
Web Workers解决方案
遇到这事儿，你可以试试HTML5有个很好用的工具——Web Workers！这个神奇的工具能把那些大费周章的JAS逻辑搬到后台去跑，再也不会影响到用户界面的展示。而且，尽管Web Workers不能直接和页面互动（比如抓取元素、弹窗什么的），可是它们之间还是能通过专业手段传消息。
实例对比
比如说，如果我们让用户输入几个数字做加法，用传统方法算起来的话，一旦数值变得很大就会花好久时间，甚至有可能让网页卡住动不了。但如果是用Web Workers来搞计算，就能把这个计算过程扔给后台的线程去处理，这样就解决了上面提到的问题。比如咱们在Chrome15下比较一下这两种算法，你会发现Web Workers 在大数值的情况下真的超好用！
webworkers--calculate
<script type="text/javascript" src="calculate.js">
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+result;
document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";
}
注意事项与优化建议
为避免浏览器进入假死状态，开发者们需要注意以下几点：
1.避免编写存在死循环或过深递归操作的JS代码；
webworkers--calculate
var worker = new Worker("calculate.js");
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+data;
document.getElementById("time").innerHTML ="workers 耗时："+ (data2 - data1)+"ms";
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
worker.postMessage(val);
}
2.减少对DOM对象的频繁操作；
用好Web Workers，把费时间的任务丢到后台搞定。
onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};
4.注意JS代码执行效率，尽量减少不必要的计算和操作；
5.在开发过程中定期检查性能并进行优化。
未来展望
因为网络技术越来越牛了，所以Web Workers在未来的网页上会发挥更大的作用。这种工具可以充分利用多核处理器，让用户感受到更加顺滑和迅速的互动效果，从而提升前端性能。
上文就是解释啥叫浏览器假死状态以及怎么搞定它。搞明白浏览器内核运作、避开那些老生常谈的问题，还有巧妙利用点儿新技术，就能优化网站开发，让访问更流畅了，用户也会开心。
评论0