加速IE的Javascript document輸出的方法

更新時(shí)間：2010年12月02日 16:02:13 作者：

加入這樣的一行代碼IE的document的訪問(wèn)速度至少可以提高5倍以上，對(duì)于頁(yè)面使用document的朋友絕對(duì)是個(gè)好方法。

將下列代碼加在JavaScript的最前面

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

/*@cc_on _d=document;eval('var document=_d')@*/

加入這樣的一行代碼IE的document的訪問(wèn)速度至少可以提高5倍以上
下面是加入前和加入后的測(cè)試比較代碼

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

 
// Before 
var date = new Date; 
for (var i = 0; i < 100000; i++) document; 
alert(new Date - date); // 643 

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

 
/*@cc_on _d=document;eval('var document=_d')@*/ 

// After 
date = new Date; 
for (var i = 0; i < 100000; i++) document; 
alert(new Date - date); // 145 

速度提高了不少吧！

解說(shuō)：
首先，IE里document就這樣直接被調(diào)用的話被執(zhí)行的是window 對(duì)象的內(nèi)部函數(shù)，而這個(gè)比較低效的。根據(jù)這一點(diǎn)，下面的處理可以提高速度：
var doc = document;

document; // 慢
doc; // 這個(gè)比上面的（document）快

雖然像上面那么寫可以直接使用，但是之前用到document的地方都要去替換，這個(gè)有點(diǎn)麻煩了點(diǎn)吧。所以，看下面的：
var doc = document;
var document = doc;
可以實(shí)現(xiàn)的話那就太好了……

了解JavaScript的人應(yīng)該知道，JavaScript的變量是在最開始的時(shí)候就生成的，所以這里的document就變成了undefined了。
沒關(guān)系，繼續(xù)改進(jìn)~
var doc = document;
eval('var document = doc');

eval的作用就是在作用域范圍內(nèi)改變變量，這樣的話，后面的document就可以被正常使用了。
最后，加上只有在IE內(nèi)有效的條件，就像下面這樣就可以了~

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

 
/*@cc_on 
var doc = document; 
eval('var document = doc'); 
@*/ 

舉一反三，像下面這樣的寫法，document以外的全局變量也可以用上面的方法，起到加速的作用。

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

 
/*@cc_on 
eval((function(props) { 
var code = []; 
for (var i = 0 l = props.length;i<l;i++){ 
var prop = props[i]; 
window['_'+prop]=window[prop]; 
code.push(prop+'=_'+prop) 
} 
return ‘var ‘+code.join(','); 
})('document self top parent alert setInterval clearInterval 
setTimeout clearTimeout'.split(' ‘))); 
@*/ 

下面是Franky的回復(fù)：
首先，IE里document就這樣直接被調(diào)用的話被執(zhí)行的是window 對(duì)象的內(nèi)部函數(shù)，而這個(gè)比較低效的。根據(jù)這一點(diǎn)，下面的處理可以提高速度：

這個(gè)說(shuō)法不對(duì)..

之所以你的測(cè)試前后有差異,主要區(qū)別在于作用域鏈查找.
你的代碼是在global 執(zhí)行環(huán)境.所以IE下,會(huì)訪在global對(duì)象去查找 key 為'document'的成員. 而這個(gè)對(duì)象在ie中是一個(gè)com+實(shí)現(xiàn)的宿主對(duì)象. 他不在global中. global中沒有,則去window中再次查找.造成了速度變慢.

同樣的全局對(duì)象 Math. 就不會(huì)帶來(lái)這個(gè)問(wèn)題.原因是Math 在 Global上. 一次作用域鏈查找就找到了.

對(duì)于優(yōu)化. 一個(gè)建議就是
var win = window, doc = document,undefined;
每層作用域內(nèi),如果這個(gè)成員使用超過(guò)兩次,就有意義.

而如果你只在全局作用域使用一次 ie 條件注釋 ,首先非ie就無(wú)法享受到作用域被縮短的好處. 當(dāng)然非ie 不會(huì)存在global->window的多一次責(zé)任鏈查找.

這里的優(yōu)化核心,就是縮短作用域鏈. 雖然opera chrome safarai等較新版本,對(duì)作用域鏈查找做了優(yōu)化. 但是我們認(rèn)為的縮短作用域鏈. 對(duì)老的瀏覽器是有積極作用的.且對(duì)具備優(yōu)化的瀏覽器,也不會(huì)帶來(lái)過(guò)于負(fù)的面影響.

您可能感興趣的文章: