給頁(yè)面渲染時(shí)間加速干掉Dom Level 0 Event

更新時(shí)間：2012年12月19日 16:20:54 作者：

我們?nèi)サ羰录壎ǖ倪壿?發(fā)現(xiàn)只渲染dom元素,不綁定事件的時(shí)間,僅僅125ms,可見事件綁定的時(shí)間消耗還是很大的 ,尤其是第一種方式,也就是Dom Level 0 Event,最為耗時(shí)

現(xiàn)在的web應(yīng)用越來越復(fù)雜,需要響應(yīng)各種各樣的用戶觸發(fā)事件,因而也就不可避免的,需要給我們的html頁(yè)面上的dom元素增加事件監(jiān)聽函數(shù).

我們知道給dom元素綁定事件監(jiān)聽函數(shù)的方法有如下3種:
1 : 頁(yè)面html:

復(fù)制代碼代碼如下:

2: 頁(yè)面html:

復(fù)制代碼代碼如下:

Javascript:

復(fù)制代碼代碼如下:

document.getElementById(“btn”).onclick = test;

3: 頁(yè)面html:

復(fù)制代碼代碼如下:

Javascript:

復(fù)制代碼代碼如下:

document.getElementById(“btn”).atachEvent(“onclick”,test); //ie

這3種方法的功能效果和差異,大家都了解,在此就不在贅述了,但是這3種方法,對(duì)頁(yè)面渲染的速度,資源的消耗,卻是有很大不同的.

正文后面的html代碼是一個(gè)demo頁(yè)面,大家可以用ie瀏覽器打開,通過注釋不同的代碼段,查看頁(yè)面運(yùn)行效果.
可以看到第一種方式的效率是最低的,隨著頁(yè)面節(jié)點(diǎn)的增多,頁(yè)面渲染時(shí)間急劇增加,在ie7下運(yùn)行,大概670ms;
第二種方式明顯好一些,在ie7下,大概250ms
而第三種方式則是最快的方法,也是web前端開發(fā)推薦的標(biāo)準(zhǔn)寫法,在ie7下,大概188ms;
然后我們?nèi)サ羰录壎ǖ倪壿?發(fā)現(xiàn)只渲染dom元素,不綁定事件的時(shí)間,僅僅125ms,可見事件綁定的時(shí)間消耗還是很大的 ,尤其是第一種方式,也就是Dom Level 0 Event,最為耗時(shí).

另外,大家運(yùn)行各段代碼的時(shí)候,不妨打開任務(wù)管理器,找到瀏覽器對(duì)應(yīng)的進(jìn)程,查看代碼運(yùn)行時(shí)cpu的消耗以及內(nèi)存的使用.
我們可以看到,Dom Level 0 Event,對(duì)cpu的消耗明顯要高很多.

對(duì)內(nèi)存的消耗分析:
重新打開瀏覽器,空白頁(yè)面的內(nèi)存占用量大概是37M,虛擬內(nèi)存為28M,頁(yè)面渲染后:
1 內(nèi)存使用 54M,虛擬內(nèi)存41M
2 內(nèi)存使用44M,虛擬內(nèi)存31M
3 內(nèi)存使用44M,虛擬內(nèi)存31M
可見Dom Level 0 Event對(duì)內(nèi)存的消耗,也遠(yuǎn)遠(yuǎn)超出了其它方式.
為什么Dom Level 0 Event會(huì)這么消耗系統(tǒng)資源呢?對(duì)cpu和內(nèi)存的消耗都遠(yuǎn)遠(yuǎn)超出了其它方式.我們來做一個(gè)簡(jiǎn)單分析.

為了便于分析,我們不妨修改一下我們的代碼 <button onclick=”debugger;test();”></button> ,然后運(yùn)行頁(yè)面,在ie的script debugger里我們找到堆棧調(diào)用這一項(xiàng),可以看到有一個(gè)anonymos function,這個(gè)function是從何而來的呢.原來瀏覽器在對(duì)Dom Level 0 Event做綁定的時(shí)候,會(huì)自動(dòng)生成一個(gè)包含我們的代碼的匿名函數(shù),然后把這個(gè)匿名函數(shù)綁定到事件.類似于如下方式:

復(fù)制代碼代碼如下:

 
document.getElementById(“btn”).onclick = function(event){ 
test(); 
} ; 

而ie瀏覽器又沒有足夠的智能,區(qū)分出眾多內(nèi)部功能完全一致的匿名函數(shù)并合并它們的引用,所以導(dǎo)致了隨著dom事件綁定的越來越多,匿名函數(shù)的個(gè)數(shù)也越來越多.因?yàn)橐暶鲾?shù)量眾多的事件處理匿名函數(shù),也就不難明白,為什么會(huì)消耗如此多的系統(tǒng)資源了.

隨著dom元素的增多,這個(gè)資源消耗就會(huì)越來越嚴(yán)重.而且我們可以嘗試著刷新一下頁(yè)面,發(fā)現(xiàn)隨著刷新的次數(shù)增加,頁(yè)面運(yùn)行越來越慢,cpu消耗也越來越多,內(nèi)存也會(huì)有少量增加.可見,Dom Level 0 Event 還會(huì)帶來少量的內(nèi)存泄露.至于時(shí)間的延長(zhǎng),cpu消耗的加聚,推測(cè)是因?yàn)闉g覽器忙于釋放眾多的匿名函數(shù)所占用的資源所帶來的后果.

進(jìn)一步深入,由于ie瀏覽器是基于冒泡的事件模型,子元素的event會(huì)冒泡到父元素,所以更極致的優(yōu)化,是去掉眾多子元素的事件綁定,而將事件綁定到父元素,在正文后的demo中,也有這方面的嘗試,可以看到不僅cpu,內(nèi)存消耗最低,時(shí)間上也跟渲染干凈的html頁(yè)面是一樣的.

所以我們?cè)陧?yè)面事件綁定中,要盡量避免Dom Level 0 Event,而且要盡可能的將事件上升．（當(dāng)然也要考慮事件處理的靈活性）．
demo：

復(fù)制代碼代碼如下:

 
<BODY> 
<ul id="list"></ul> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var $ = function(id){ 
return document.getElementById(id) 
}; 
function test(){ 
alert(1) 
} 
var ul = $("list"); 
var count = 5000; 
// ie7 
//--> 
</SCRIPT> 
<script> 
var d = new Date() 
var str = []; 
for(var i = 0;i<count;i++){ 
str.push('<li onclick="test();">'+i+'</li>') 
} 
ul.innerHTML = str.join(""); 
alert(new Date - d); 
//670 刷新時(shí)時(shí)間增加 85 
</script> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/*var d = new Date() 
var str = []; 
for(var i = 0;i<count;i++){ 
str.push('<li>'+i+'</li>') 
} 
ul.innerHTML = str.join(""); 
alert(new Date - d); */ 
//125 
//--> 
</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/*var d = new Date() 
var str = []; 
for(var i = 0;i<count;i++){ 
str.push('<li>'+i+'</li>') 
} 
ul.innerHTML = str.join(""); 
var li = document.getElementsByTagName("li"); 
var l = li.length; 
for(var i=0;i<l;i++){ 
li[i].onclick = test; 
} 
li = null; 
alert(new Date - d);*/ 
//250 
//--> 
</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/*var d = new Date() 
var str = []; 
for(var i = 0;i<count;i++){ 
str.push('<li>'+i+'</li>') 
} 
ul.innerHTML = str.join(""); 
var li = document.getElementsByTagName("li"); 
var l = li.length; 
for(var i=0;i<l;i++){ 
li[i].attachEvent("onclick",test); 
} 
li = null; 
alert(new Date - d);*/ 
//188 
//--> 
</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/*var d = new Date() 
var str = []; 
for(var i = 0;i<count;i++){ 
str.push('<li>'+i+'</li>') 
} 
ul.innerHTML = str.join(""); 
ul.attachEvent("onclick",test); 
alert(new Date - d);*/ 
//125 
//--> 
</SCRIPT> 
</BODY> 