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

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

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

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:本文由维奇总结,如有转载请注明出处

(0)

相关推荐

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

    面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

  • 线程崩溃不会导致 JVM 崩溃的原因解析

    目录 线程崩溃,进程一定会崩溃吗 进程是如何崩溃的-信号机制简介 为什么线程崩溃不会导致 JVM 进程崩溃 openJDK 源码解析 总结 参考文章 网上看到一个很有意思的据说是美团的面试题:为什么线程崩溃崩溃不会导致 JVM 崩溃,这个问题我看了不少回答,但都没答到根本原因,所以决定答一答,相信大家看完肯定会有收获,本文分以下几节来探讨 线程崩溃,进程一定会崩溃吗 进程是如何崩溃的-信号机制简介 为什么在 JVM 中线程崩溃不会导致 JVM 进程崩溃 openJDK 源码解析 线程崩溃,进程一

  • vue关于接口请求数据过大导致浏览器崩溃的问题

    目录 关于接口请求数据过大导致浏览器崩溃 解决的方法也很简单 一行代码解决vue数据量大卡顿问题 关于接口请求数据过大导致浏览器崩溃 做vue后台的时候,有一个导出所有用户数据的需求,我这里是前端导出,用的是iview的exportCsv方法,在这里说说遇到的问题吧. 首先看这里,查询的时候,Size有155MB,最开始在谷歌.火狐之类的上面测试,一切正常,后来被提出在360浏览器里页面直接崩溃. 解决的方法也很简单 因为拿到后端传过来的数组后,赋值给了data里面的一个数组,即this.xxx

  • jupyter notebook 使用过程中python莫名崩溃的原因及解决方式

    最近在使用 Python notebook时老是出现python崩溃的现象,如下图,诱发的原因是"KERNELBASE.dll",异常代码报"40000015". 折腾半天,发现我启动notebook时是用自定义startup.bat方式方式启动的,bat文件的内容为 start C:\Anaconda3\python.exe "C:/Anaconda3/Scripts/jupyter-notebook-script.py" 平时双击这个bat文

  • 让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    Ajax与pjax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新-无刷新操作. 但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.ha

  • Mysql/MariaDB启动时处于进度条状态导致启动失败的原因及解决办法

    今天打开网站突然发现网站无法打开,后来通过SSH登陆服务器发现MARIADB数据库没有启动成功,再次启动还是无法成功启动,一直处于启动进度条,进度条结束后提示ERROR.查看日志出现以下错误: InnoDB: Unable to lock ./ibdata1, error: 11 后经调试发现是因为MariaDB数据库所在分区已经满了,造成无法启动. 只有将MariaDB数据库存放数据目录移动到另外一个磁盘份额比较大的分区或者将当前分配删除一些不必要的文件. 移动办法: 1.停掉mysql服务器

  • 关于9行代码导致系统崩溃的分析整理

    目前很多地方都转载着利用9行代码史windows崩溃的文章,不过我发现没有关于为什么会使windows崩溃的分析.我先把原文给大家看看.然后把具体的细节说一下. 微软一直声称Windows XP多么多么稳定可靠,但日前一位名为Masaru Tsuchiyama的外国编程爱好者刊出了一小段C语言代码.这一只有9行的小程序如果在Windows XP/2000下运行,则可导致系统完全崩溃,并重新启动.但此程序对其他版本的Windows没有任何影响.这一产生无限循环输出的小程序的代码如下: #inclu

  • win2003下PHP使用preg_match_all导致apache崩溃问题的解决方法

    小编的平台是windows server 2003(32位系统) + Apache/2.2.9 (Win32) + PHP/5.2.17,在使用正则表达式 preg_match_all (如 preg_match_all("/ni(.*?)wo/", $html, $matches);)进行分析匹配比较长的字符串 $html 时(大于10万字节,一般用于分析采集回来的网页源码),Apache服务器会崩溃自动重启.     在Apache错误日志里有这样的提示: 复制代码 代码如下: [

  • listView的item中有checkbox,导致setOnItemClick失效的原因及解决办法

     一:item的根布局设置 Android:clickable="true",之后导致item点击事件失效,对根布局设置android:descendantFocusability="blocksDescendants",以及对checkbox设置android:focusable="false"都不会起作用,所以item根布局不要设置android:clickable="true" 二:item根布局设置android:de

  • springcloud项目占用内存好几个G导致服务器崩溃的问题

    问题描述 springcloud项目部署或调试时,占用的内存特别多.当部署到服务器上去后,有可能导致服务器内存占用过多而崩溃. 解决方案 1.本地调试时,IDEA中添加参数以减少本地内存使用 按照下图点击,添加参数 -Xms64m -Xmx128m 2.远程上线时,命令行添加参数 2.1单个服务直接部署 例如使用nohup执行时,在java与-jar之间添加参数-Xms64m -Xmx128m nohup java -Xms64m -Xmx128m -jar x.xx-xx.jar & 2.2对

随机推荐