PAGE / NUMPAGES

HTML 5 Web开发：防止浏览器假死的方法

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了。

AD：

一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。资料个人收集整理，勿做商业用途

JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程在运行JS程序。资料个人收集整理，勿做商业用途

GUI 渲染线程负责渲染浏览器界面，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。资料个人收集整理，勿做商业用途

事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。资料个人收集整理，勿做商业用途

了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了，当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新，而后面的事件响应 也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作，一旦JS调用结束就会马上进行一次GUI渲染，然后 台湾高山茶 才 开始执行下一个任务，所以JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器，如在IE6下一次插入大量的HTML。而如果真的弹出了 脚本 运行时间过长 的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。资料个人收集整理，勿做商业用途

现在如果遇到了这种情况，我们可以做的不仅仅是优化 代码，html5的webWorkers提供了js的后台处理线程的API，它允许将复杂耗时的单纯js逻辑处理放在浏览器后台线程中进行处理，让js线 程不阻塞UI线程的渲染。这个线程不能和页面进行交互，如获取元素、alert等。多个线程间也是可以通过相同的方法进行数据传递。资料个人收集整理，勿做商业用途

直接看代码：

例子：用户输入一个数字，进行加法运算(+=)

以前的做法：

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttonοnclick= calculate() 计算 button br divid= result >资料个人收集整理，勿做商业用途

使用webWorkers以后：

calculate.html

!DOCTYPEHTML htmllang= en head metacharset= UTF-8 title webworkers--calculate title head body inputid= num name= num type= text buttonοnclick= calculate() 计算 button br divid= result >资料个人收集整理，勿做商业用途

calculate.js

onmessage=function(event){ varnum=event.data; varresult=0; for(vari=0;i num;i++){ result+=i; } postMessage(result); };资料个人收集整理，勿做商业用途

webWorker需要将代码放入web 玛瑙 服务器中， 如果使用的是localhost请用高版本的chrome浏览器打开，firefox浏览器在处理localhost的时候会出现 Could not get domain! 的错误，关于这个可以参考：https:show_bug.cgi?id=682450 对比上面的两种实现方式，当计算值达到100亿的时候，普通做法耗时已经很长，且一般会卡死了。资料个人收集整理，勿做商业用途

webWorkers在Chrome15下的效果

更正：getTime()返回的应该是毫秒(ms)，而不是秒(s)。

如下图所示：

普通方法在Chrome15下的效果

可见webWorkers在未来的w