網(wǎng)站導(dǎo)致瀏覽器崩潰的原因總結(jié)(多款瀏覽器) 推薦
對于訪客,如果登錄您網(wǎng)站,瀏覽器就立刻崩潰,我想這對誰都是無法容忍的,對此總結(jié)了網(wǎng)站導(dǎo)致瀏覽器崩潰的原因:
1. 內(nèi)存泄漏
還是先談下內(nèi)存泄漏,網(wǎng)站由于內(nèi)存泄漏的而照成崩潰有兩種情況,服務(wù)器的崩潰和瀏覽器的崩潰。內(nèi)存泄漏所造成的問題是顯而易見的,它使得已分配的內(nèi)存的引用就會丟失,只要系統(tǒng)還在運(yùn)行中,則進(jìn)程就會一直使用該內(nèi)存。這樣的結(jié)果是,曾占用更多的內(nèi)存的程序會降低系統(tǒng)性能,直到機(jī)器完全停止工作,才會完全清空內(nèi)存。
Apache的Web服務(wù)器是用C/C++編寫的,C/C++的內(nèi)存泄漏問題不必多說,系統(tǒng)中存在無法回收的內(nèi)存,有時候會造成內(nèi)存不足或系統(tǒng)崩潰。在Java中,內(nèi)存泄漏就是存在一些被分配的可達(dá)而無用的對象,這些對象不會被GC所回收,然而它卻占用內(nèi)存。
而在客戶端,JavaScript所造成的內(nèi)存泄漏,也將可能使得瀏覽器崩潰。關(guān)于JavaScript的內(nèi)存泄漏的文章,較權(quán)威的有《Memory leak patterns in JavaScript》和《Understanding and Solving Internet Explorer Leak Patterns》。
JavaScript 是一種垃圾收集式(garbage collector,GC)語言,這就是說,內(nèi)存是根據(jù)對象的創(chuàng)建分配給該對象的,并會在沒有對該對象的引用時由瀏覽器收回。再根據(jù)《Fabulous Adventures In Coding》一文的說法:“JScript uses a nongenerational mark-and-sweep garbage collector.”,對” nongenerational mark-and-sweep”的可以這樣理解,瀏覽器處理JavaScript并非采用純粹的垃圾收集,還使用引用計(jì)數(shù)來為Native對象(例如Dom、ActiveX Object)處理內(nèi)存。
在引用計(jì)數(shù)系統(tǒng),每個所引用的對象都會保留一個計(jì)數(shù),以獲悉有多少對象正在引用它。如果計(jì)數(shù)為零,該對象就會被銷毀,其占用的內(nèi)存也會返回給堆。 當(dāng)對象相互引用時,就構(gòu)成循環(huán)引用,瀏覽器(IE6,F(xiàn)irefox2.0)對于純粹的JavaScript對象間的循環(huán)引用是可以正確處理的,但由于在引用計(jì)數(shù)系統(tǒng),相互引用的對象都不能被銷毀,因?yàn)槭且糜?jì)數(shù)永遠(yuǎn)不能為零,因此瀏覽器無法處理JavaScript與Native對象(例如Dom、ActiveX Object)之間循環(huán)引用。所以,當(dāng)我們出現(xiàn)Native對象與JavaScript對象間的循環(huán)引用時,就會出現(xiàn)內(nèi)存泄漏的問題。
簡單來說就是,瀏覽器使用引用計(jì)數(shù)來為Native對象處理內(nèi)存,而引用計(jì)數(shù)的對象無法被銷毀,涉及Native對象的循環(huán)引用將會出現(xiàn)內(nèi)存泄漏。配合下面的例子,理解這句話,基本上就可以理解JavaScript造成的內(nèi)存泄漏了。
var obj;
window.onload = function(){
// JavaScript對象obj到DOM對象的引用,根據(jù)id獲得
obj=document.getElementById("DivElement");
// DOM 對象則有到此 JavaScript 對象的引用,由expandoProperty實(shí)現(xiàn)
document.getElementById("DivElement").expandoProperty=obj;
};
可見,JavaScript 對象和 DOM 對象間就產(chǎn)生了一個循環(huán)引用。由于 DOM 對象是通過引用計(jì)數(shù)管理的,所以兩個對象將都不能銷毀。
另一種情況是閉包中,當(dāng)碰到閉包,我們在Native對象上綁定事件響應(yīng)代碼時,很容易制造出Closure Memory Leak。其關(guān)鍵原因和前者是一樣的,也是一個跨JavaScript對象和Native對象的循環(huán)引用。只是代碼更為隱蔽。
window.onload = function AttachEvents(element){
//element有個引用指向函數(shù)ClickEventHandler()
element.attachEvent( " onclick " , ClickEventHandler);
function ClickEventHandler(){
//該函數(shù)有個引用指向AttachEvents(element)調(diào)用Scope,
//也就是執(zhí)行了參數(shù)element。
}
}
這里簡單理解了JavaScript造成內(nèi)存泄漏的原因,內(nèi)存泄漏加大瀏覽器的負(fù)擔(dān),很有可能導(dǎo)致瀏覽器崩潰,我們要做的就是盡量去避免這種情況,做法可參考剛剛所說《Memory leak patterns in JavaScript》和《Understanding and Solving Internet Explorer Leak Patterns》兩篇文章加以理解。處理JavaScript內(nèi)存泄漏最終目的還是要打破JavaScript對象和Native對象間的循環(huán)引用或者清零引用計(jì)數(shù),釋放對象。
一些內(nèi)存泄漏如閉包內(nèi)存泄漏,我們可能比較難以發(fā)現(xiàn),內(nèi)存泄漏的檢測我們可能參考《javascript 內(nèi)存泄露工具使用》。
2. 網(wǎng)頁代碼復(fù)雜和瀏覽器bug
大量個人網(wǎng)站和低質(zhì)量網(wǎng)站代碼的涌現(xiàn)造成對瀏覽標(biāo)準(zhǔn)的普遍不支持,如果正好碰上瀏覽器存在的一些bug,瀏覽器渲染引擎在處理這些網(wǎng)頁代碼的時候會出錯,比如陷入死循環(huán)或直接崩潰等。
HTML代碼導(dǎo)致網(wǎng)站崩潰
這是HTML結(jié)構(gòu)錯誤而導(dǎo)致IE6的崩潰,在<col width="100"/>前或后添加任何字符均會導(dǎo)致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>
該代碼來個韓國的一個網(wǎng)站,無論是使用XHTML或者HTML的什么版本,只要帶了DOCTYPE聲明,IE6就會立即崩潰,當(dāng)不帶DOCTYPE聲明的時候就沒有錯誤,原因可能跟文檔類型聲明有關(guān)。
令I(lǐng)E6崩潰的CSS代碼
該代碼參考自網(wǎng)站Cats who Code。該Bug發(fā)現(xiàn)與2007年,據(jù)說是一名日本人發(fā)現(xiàn)的:
<style>*{position:relative}</style>
<table><input></table>
原因在于table中直接放置內(nèi)容,在IE6會引起mshtml.dll模塊損壞而關(guān)閉瀏覽器,非IE6則安全無恙。
除此之外,存在于IE6的Bug還有下面這種情況,當(dāng)偽類為 a:active 時同樣會遇到此問題:
<style type="text/css">
a{position:relative;}
a:hover{float:left;}
</style>
<a href="">崩潰IE6 ,crash ie6</a>
解決方案:為 <a> 添加 zoom:1; 令其觸發(fā)haslayout。
<style type="text/css">
a{position:relative;zoom:1;}
a:hover{float:left;}
</style>
令I(lǐng)E7崩潰的CSS代碼
此Bug來自偷米飯,它只存在IE7中據(jù)估計(jì)是處理省略字的時候?qū)е翴E7崩潰。
<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; 令其觸發(fā)haslayout
令I(lǐng)E6崩潰的JavaScript代碼
來自Internet Explorer Sucks,這個網(wǎng)站就是使用了一下代碼,當(dāng)你使用IE6訪問的時候,瀏覽器將立刻崩潰。代碼如下:
<script>for (x in document.write) { document.write(x);}</script>
具體引起的原因暫時無法解析,但在兼容性和執(zhí)行效率來看一般不會采取這樣的寫法。
3. 網(wǎng)頁數(shù)據(jù)過多
網(wǎng)頁含有大量需要處理的數(shù)據(jù),造成系統(tǒng)繁忙,如多圖頁面,超長頁面等,或者網(wǎng)頁內(nèi)嵌的各種控件會導(dǎo)致瀏覽器處理大量數(shù)據(jù),造成系統(tǒng)繁忙。如Flash游戲,ActiveX控件等。當(dāng)瀏覽器訪問網(wǎng)站的時候,如果網(wǎng)站的數(shù)據(jù)量大,會使得瀏覽器一般在處理過程中會占用很大的CPU使用率和內(nèi)存、造成瀏覽器失去響應(yīng),甚至?xí)闺娔X系統(tǒng)死機(jī)。在網(wǎng)站開發(fā)的時候,如果充分考慮Web性能,很大程度上能避免這個問題。
4. Ajax的Web服務(wù)漏洞
Ajax的是基于XML的異步傳輸,文本格式的XML消息可能是二進(jìn)制數(shù)據(jù)帶寬量的兩倍之多。傳輸XML消息所需的帶寬越多,系統(tǒng)或應(yīng)用程序用來執(zhí)行其他任務(wù)的可用資源就越少。例如執(zhí)行復(fù)雜算法來獲取期望結(jié)果。
過高的帶寬可能導(dǎo)致由系統(tǒng)超載引起的性能減退。過高的帶寬將導(dǎo)致Ajax應(yīng)用程序輸出破損的數(shù)據(jù),因?yàn)闆]有足夠的資源生成干凈的數(shù)據(jù)。這意味著Web服務(wù)門戶(Ajax應(yīng)用程序?qū)儆谄渲械囊徊糠?將把破損數(shù)據(jù)暴露給門戶的其他部分,從而導(dǎo)致畸形消息和過度解析。如果威脅者利用了這個漏洞,則會引起瀏覽器崩潰。
另外一方面,頻繁的、較小的 HTTP 請求會加重后端服務(wù)器、負(fù)載均衡程序和防火墻的負(fù)擔(dān),結(jié)果是造成過高的帶寬,最終導(dǎo)致性能降低。如果客戶端長期停留在該頁面或沒有關(guān)閉瀏覽器,會使得瀏覽器的內(nèi)存持續(xù)上漲,得不到釋放,導(dǎo)致客戶端瀏覽器崩潰。
為此,在較多的時候Ajax的時候,我們要考慮通過專門的硬件加速器、優(yōu)化軟件、消除代碼冗余、XML加速功能和解決互操作性問題等方式加速Ajax應(yīng)用程序。另外,積極地監(jiān)視通信流可以持續(xù)地度量Ajax應(yīng)用程序的網(wǎng)絡(luò)流量性能。通過將數(shù)據(jù)放入實(shí)時日志中,您可以查看在哪些位置何時出現(xiàn)大量的包丟失和抖動事件,響應(yīng)變慢的原因以及如何通過修改應(yīng)用程序的優(yōu)先級來改善通信流性能。
5. 其他原因
除以上提到的原因之外,還有其他許多原因,雖然有些不會導(dǎo)致瀏覽器直接崩潰,但也會造成網(wǎng)站無法訪問,如日志文件導(dǎo)致磁盤已滿、Web服務(wù)器C指針錯誤、進(jìn)程缺乏文件描述符、線程死鎖、數(shù)據(jù)庫中的臨時表不夠用和服務(wù)器超載等,可參考《導(dǎo)致Web站點(diǎn)崩潰最常見的七大原因》。
總結(jié)
對于訪客,如果登錄您網(wǎng)站,瀏覽器就立刻崩潰,我想這對誰都是無法容忍的,通過總結(jié)《網(wǎng)站令瀏覽器崩潰的原因》,在我們從事網(wǎng)站開發(fā)維護(hù)的時候,我們應(yīng)該盡量去避免內(nèi)存泄漏、代碼錯誤和冗余及數(shù)據(jù)量過大等問題,構(gòu)建更佳性能的站點(diǎn)。
PS:本文由維奇總結(jié),如有轉(zhuǎn)載請注明出處
相關(guān)文章
JS實(shí)現(xiàn)二維數(shù)組橫縱列轉(zhuǎn)置的方法
下面小編就為大家分享一篇JS實(shí)現(xiàn)二維數(shù)組橫縱列轉(zhuǎn)置的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-04-04JavaScript使用cookie實(shí)現(xiàn)記住賬號密碼功能
這篇文章主要介紹了JavaScript使用cookie實(shí)現(xiàn)記住賬號密碼功能,本文直接給出完整測試代碼,需要的朋友可以參考下2015-04-04Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜式教程(二)
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜教程(二)的相關(guān)資料,需要的朋友可以參考下2015-12-12js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無縫滾動輪播示例
這篇文章主要介紹了JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無縫滾動輪播,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο髮?shí)現(xiàn)的無縫滾動輪播相關(guān)對象定義、初始化及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__,深入學(xué)習(xí)了三個用來訪問prototype的方法,感興趣的小伙伴們可以參考一下2015-11-11