一个浏览器至少存在三个线程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操作也会导致事件响应缓慢甚至真正卡死浏览器如在IE下一次插入大量的HTML而如果真的弹出了“脚本 运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了

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

直接看代码

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

以前的做法

计算

使用webWorkers以后

calculatehtml

使用webWorkers以后

calculatehtml

计算

calculatejs

onmessage = function(event){

var num = eventdata;

var result = ;

for(var i = ; i

result += i;

}

postMessage(result);

};

webWorker需要将代码放入web服务器中 如果使用的是localhost请用高版本的chrome浏览器打开firefox浏览器在处理localhost的时候会出现“Could not get domain!”的错误关于这个可以参考对比上面的两种实现方式当计算值达到亿的时候普通做法耗时已经很长且一般会卡死了

以上就是我们给大家介绍的防止浏览器假死的方法了。希望大家继续关注我们的网站!