setTimeout 导致的浏览器假死

问题

　　前几天,同事遇到一个浏览器假死的问题。就是浏览器在响应一个请求的时候，就突然不响应时间，进入假死状态，Cup也飙升到100%. 但是这个问题只出现在IE浏览器，chrome和Firefox等其他浏览器正常。

原因

　　Js 代码里面，看着也没有什么耗时的操作和后台异步调用。没办法，只能从响应事件的最开始一步一步调查。经过一番调试之后，问题定位在setTimeout 函数。当把setTimeout 里面执行的函数去掉之后，立马就不会出现这种情况。查看setTimeout 里面调用的函数，发现里面JS中有一些的DOM操作，函数里面还进行了html的拼接。难道是这个原因导致的。于是网上查原因：当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新，而后面的事件响应也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。说白了就是：浏览器无法在渲染页面的同时执行js。在setTimeout 函数里面，确实有一些拼接html 和操作dom 的情况。可能就是js在执行的时候，js代码里面又有一些拼接html 的操作。导致浏览器无法渲染页面，而js 里面在操作这个页面的内容。导致浏览器卡死。

浏览器的内核处理方式：

　　浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程,GUI渲染线程，浏览器事件触发线程。

JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程在运行JS程序。
GUI 渲染线程负责渲染浏览器界面，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

　　明白了浏览器内核处理方式，就可以理解浏览器为什么会进入假死状态了，当一段JS脚本长时间占用着cpu 时间时，就会挂起浏览器的GUI更新，而后面的事件响应也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作，一旦JS调用结束就会马上进行一次GUI渲染，然后才开始执行下一个任务，所以JS中大量的DOM操作也会导致事件响应缓慢甚至卡死浏览器。

　　这个文章写得更加透彻：http://www.nowamagic.net/librarys/veda/detail/787

posted @ 2014-07-18 17:42 章为忠阅读(...) 评论(...) 编辑收藏

setTimeout 导致的浏览器假死相关推荐

转:优化js脚本设计，防止浏览器假死
原链接打不开了,复制一份保存: 在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化 ...
js样式会影响ajax,js ajax同步请求造成浏览器假死的问题
今天写了一个简单的loading效果,希望在点击加载按钮后会出现loading字样,然后执行ajax同步请求,加载完之后loading样式消失,本来是很简单的需求,结果遇上了很尴尬的问题~ 问题:当我 ...
OMM导致tomcat引用假死
背景在开发测试环境发现一个奇怪的情况,因查询100w条数据导致OOM,导致服务不可用,java应用是正常的,并没有因为异常退出. pod配置:2C1G jdk1.8 spring-boot-star ...
优化js设计，防止浏览器假死（转）
http://www.nowamagic.net/librarys/veda/detail/787 在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长&qu ...
js防止刷访问量_优化js脚本设计，防止浏览器假死
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们 ...
java启动子线程过多导致卡死_java线程基础巩固---多Product多Consumer之间的通讯导致出现程序假死的原因分析...
在上一次中已经实现一个生产者与消费者的初步模型(http://www.cnblogs.com/webor2006/p/8413286.html),但是当时只是一个生产者对应一个消费者,先贴下代码: p ...
浏览器假死,浏览器堵塞,浏览器卡的原因
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了. 一个浏览器至少存在三个线程:js引擎线程( ...
网站是怎么了，一直http/1.1 302 found 浏览器假死了一样
网站不知道是怎么了,是程序的问题?还是服务器的问题?还是htaccess配置文件的问题? 反正设置了404 ErrorDocument,结果,大部分时候,请求到了404页面,浏览器就一直加载加载,反 ...
ajax异步超时,AjaxPro实现异步调用，解决浏览器假死及超时问题(示例代码)
平时使用AjaxPro的时候基本上非常easy var msg = UseClass.Method(argument).value; 由于后台响应比較慢,所以加了个"loading" ...

setTimeout 导致的浏览器假死

setTimeout 导致的浏览器假死

setTimeout 导致的浏览器假死相关推荐

最新文章

热门文章