网站导致浏览器崩溃的原因总结(多款浏览器) 推荐


Posted in Javascript onApril 15, 2010

面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏。其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作。

对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因:

1. 内存泄漏

还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃。内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统还在运行中,则进程就会一直使用该内存。这样的结果是,曾占用更多的内存的程序会降低系统性能,直到机器完全停止工作,才会完全清空内存。

Apache的Web服务器是用C/C++编写的,C/C++的内存泄漏问题不必多说,系统中存在无法回收的内存,有时候会造成内存不足或系统崩溃。在Java中,内存泄漏就是存在一些被分配的可达而无用的对象,这些对象不会被GC所回收,然而它却占用内存。

而在客户端,JavaScript所造成的内存泄漏,也将可能使得浏览器崩溃。关于JavaScript的内存泄漏的文章,较权威的有《Memory leak patterns in JavaScript》和《Understanding and Solving Internet Explorer Leak Patterns》。

JavaScript 是一种垃圾收集式(garbage collector,GC)语言,这就是说,内存是根据对象的创建分配给该对象的,并会在没有对该对象的引用时由浏览器收回。再根据《Fabulous Adventures In Coding》一文的说法:“JScript uses a nongenerational mark-and-sweep garbage collector.”,对” nongenerational mark-and-sweep”的可以这样理解,浏览器处理JavaScript并非采用纯粹的垃圾收集,还使用引用计数来为Native对象(例如Dom、ActiveX Object)处理内存。

在引用计数系统,每个所引用的对象都会保留一个计数,以获悉有多少对象正在引用它。如果计数为零,该对象就会被销毁,其占用的内存也会返回给堆。 当对象相互引用时,就构成循环引用,浏览器(IE6,Firefox2.0)对于纯粹的JavaScript对象间的循环引用是可以正确处理的,但由于在引用计数系统,相互引用的对象都不能被销毁,因为是引用计数永远不能为零,因此浏览器无法处理JavaScript与Native对象(例如Dom、ActiveX Object)之间循环引用。所以,当我们出现Native对象与JavaScript对象间的循环引用时,就会出现内存泄漏的问题。

简单来说就是,浏览器使用引用计数来为Native对象处理内存,而引用计数的对象无法被销毁,涉及Native对象的循环引用将会出现内存泄漏。配合下面的例子,理解这句话,基本上就可以理解JavaScript造成的内存泄漏了。

var obj; 
window.onload = function(){ 
// JavaScript对象obj到DOM对象的引用,根据id获得 
obj=document.getElementById("DivElement"); 
// DOM 对象则有到此 JavaScript 对象的引用,由expandoProperty实现 

document.getElementById("DivElement").expandoProperty=obj; 
};

可见,JavaScript 对象和 DOM 对象间就产生了一个循环引用。由于 DOM 对象是通过引用计数管理的,所以两个对象将都不能销毁。

另一种情况是闭包中,当碰到闭包,我们在Native对象上绑定事件响应代码时,很容易制造出Closure Memory Leak。其关键原因和前者是一样的,也是一个跨JavaScript对象和Native对象的循环引用。只是代码更为隐蔽。

window.onload = function AttachEvents(element){ 
//element有个引用指向函数ClickEventHandler() 

element.attachEvent( " onclick " , ClickEventHandler); 
function ClickEventHandler(){ 
//该函数有个引用指向AttachEvents(element)调用Scope, 

 //也就是执行了参数element。 

} 
}

这里简单理解了JavaScript造成内存泄漏的原因,内存泄漏加大浏览器的负担,很有可能导致浏览器崩溃,我们要做的就是尽量去避免这种情况,做法可参考刚刚所说《Memory leak patterns in JavaScript》和《Understanding and Solving Internet Explorer Leak Patterns》两篇文章加以理解。处理JavaScript内存泄漏最终目的还是要打破JavaScript对象和Native对象间的循环引用或者清零引用计数,释放对象。

一些内存泄漏如闭包内存泄漏,我们可能比较难以发现,内存泄漏的检测我们可能参考《javascript 内存泄露工具使用》。

 

2. 网页代码复杂和浏览器bug

大量个人网站和低质量网站代码的涌现造成对浏览标准的普遍不支持,如果正好碰上浏览器存在的一些bug,浏览器渲染引擎在处理这些网页代码的时候会出错,比如陷入死循环或直接崩溃等。

HTML代码导致网站崩溃

这是HTML结构错误而导致IE6的崩溃,在<col width="100"/>前或后添加任何字符均会导致IE6 Crash。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head></head> 
<body> 
 <table> 
<tr> 
<td> 
<table style="width:100%;table-layout:fixed;"> 
<colgroup><col width="100px"><col></colgroup> 
</table> 
</td> 
</tr> 
<table> 
</body> 
</html>

该代码来个韩国的一个网站,无论是使用XHTML或者HTML的什么版本,只要带了DOCTYPE声明,IE6就会立即崩溃,当不带DOCTYPE声明的时候就没有错误,原因可能跟文档类型声明有关。

令IE6崩溃的CSS代码

该代码参考自网站Cats who Code。该Bug发现与2007年,据说是一名日本人发现的:

<style>*{position:relative}</style> 
<table><input></table>

原因在于table中直接放置内容,在IE6会引起mshtml.dll模块损坏而关闭浏览器,非IE6则安全无恙。

除此之外,存在于IE6的Bug还有下面这种情况,当伪类为 a:active 时同样会遇到此问题:

<style type="text/css"> 
a{position:relative;} 
a:hover{float:left;} 
</style> 
<a href="">崩溃IE6 ,crash ie6</a>

解决方案:为 <a> 添加 zoom:1; 令其触发haslayout。

<style type="text/css"> 
a{position:relative;zoom:1;} 
a:hover{float:left;} 
</style>

令IE7崩溃的CSS代码

此Bug来自偷米饭,它只存在IE7中据估计是处理省略字的时候导致IE7崩溃。

<style type="text/css"> 
div{float:left;width:175px;} 
ul{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 
li{position:relative;} 
</style> 
<div> 
<ul> 
<li>崩溃崩溃崩溃崩溃崩溃crash ie7</li> 
<li>崩溃崩溃崩溃崩溃崩溃crash ie7</li> 
</ul> 
</div>

解决方案:为 <li> 添加 zoom:1; 令其触发haslayout

令IE6崩溃的JavaScript代码

来自Internet Explorer Sucks,这个网站就是使用了一下代码,当你使用IE6访问的时候,浏览器将立刻崩溃。代码如下:

<script>for (x in document.write) { document.write(x);}</script>

具体引起的原因暂时无法解析,但在兼容性和执行效率来看一般不会采取这样的写法。

3. 网页数据过多

网页含有大量需要处理的数据,造成系统繁忙,如多图页面,超长页面等,或者网页内嵌的各种控件会导致浏览器处理大量数据,造成系统繁忙。如Flash游戏,ActiveX控件等。当浏览器访问网站的时候,如果网站的数据量大,会使得浏览器一般在处理过程中会占用很大的CPU使用率和内存、造成浏览器失去响应,甚至会使电脑系统死机。在网站开发的时候,如果充分考虑Web性能,很大程度上能避免这个问题。

 

4. Ajax的Web服务漏洞

Ajax的是基于XML的异步传输,文本格式的XML消息可能是二进制数据带宽量的两倍之多。传输XML消息所需的带宽越多,系统或应用程序用来执行其他任务的可用资源就越少。例如执行复杂算法来获取期望结果。

过高的带宽可能导致由系统超载引起的性能减退。过高的带宽将导致Ajax应用程序输出破损的数据,因为没有足够的资源生成干净的数据。这意味着Web服务门户(Ajax应用程序属于其中的一部分)将把破损数据暴露给门户的其他部分,从而导致畸形消息和过度解析。如果威胁者利用了这个漏洞,则会引起浏览器崩溃。

另外一方面,频繁的、较小的 HTTP 请求会加重后端服务器、负载均衡程序和防火墙的负担,结果是造成过高的带宽,最终导致性能降低。如果客户端长期停留在该页面或没有关闭浏览器,会使得浏览器的内存持续上涨,得不到释放,导致客户端浏览器崩溃。

为此,在较多的时候Ajax的时候,我们要考虑通过专门的硬件加速器、优化软件、消除代码冗余、XML加速功能和解决互操作性问题等方式加速Ajax应用程序。另外,积极地监视通信流可以持续地度量Ajax应用程序的网络流量性能。通过将数据放入实时日志中,您可以查看在哪些位置何时出现大量的包丢失和抖动事件,响应变慢的原因以及如何通过修改应用程序的优先级来改善通信流性能。

 

5. 其他原因

除以上提到的原因之外,还有其他许多原因,虽然有些不会导致浏览器直接崩溃,但也会造成网站无法访问,如日志文件导致磁盘已满、Web服务器C指针错误、进程缺乏文件描述符、线程死锁、数据库中的临时表不够用和服务器超载等,可参考《导致Web站点崩溃最常见的七大原因》。

 

总结

对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,通过总结《网站令浏览器崩溃的原因》,在我们从事网站开发维护的时候,我们应该尽量去避免内存泄漏、代码错误和冗余及数据量过大等问题,构建更佳性能的站点。

PS:本文由维奇总结,如有转载请注明出处

Javascript 相关文章推荐
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
switchery按钮的使用方法
Dec 18 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
jQuery 打造动态下滑菜单实现说明
Apr 15 #Javascript
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
JavaScript toFixed() 方法
Apr 15 #Javascript
js function定义函数使用心得
Apr 15 #Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 #Javascript
关于文本框的一些限制控制总结~~
Apr 15 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
怎么写有吸引力的自荐信
2013/11/17 职场文书
工程质量承诺书范文
2014/03/27 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
干部外出学习心得体会
2016/01/18 职场文书
靠谱的活动总结
2019/04/16 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python