加速IE的Javascript document輸出的方法
更新時(shí)間:2010年12月02日 16:02:13 作者:
加入這樣的一行代碼IE的document的訪問(wèn)速度至少可以提高5倍以上,對(duì)于頁(yè)面使用document的朋友絕對(duì)是個(gè)好方法。
將下列代碼加在JavaScript的最前面
/*@cc_on _d=document;eval('var document=_d')@*/
加入這樣的一行代碼IE的document的訪問(wèn)速度至少可以提高5倍以上
下面是加入前和加入后的測(cè)試比較代碼
// Before
var date = new Date;
for (var i = 0; i < 100000; i++) document;
alert(new Date - date); // 643
/*@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)快
雖然像上面那么寫(xiě)可以直接使用,但是之前用到document的地方都要去替換,這個(gè)有點(diǎn)麻煩了點(diǎn)吧。所以,看下面的:
var doc = document;
var document = doc;
可以實(shí)現(xiàn)的話那就太好了……
了解JavaScript的人應(yīng)該知道,JavaScript的變量是在最開(kāi)始的時(shí)候就生成的,所以這里的document就變成了undefined了。
沒(méi)關(guān)系,繼續(xù)改進(jìn)~
var doc = document;
eval('var document = doc');
eval的作用就是在作用域范圍內(nèi)改變變量,這樣的話,后面的document就可以被正常使用了。
最后,加上只有在IE內(nèi)有效的條件,就像下面這樣就可以了~
/*@cc_on
var doc = document;
eval('var document = doc');
@*/
舉一反三,像下面這樣的寫(xiě)法,document以外的全局變量也可以用上面的方法,起到加速的作用。
/*@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中沒(méi)有,則去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ù)的面影響.
復(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)快
雖然像上面那么寫(xiě)可以直接使用,但是之前用到document的地方都要去替換,這個(gè)有點(diǎn)麻煩了點(diǎn)吧。所以,看下面的:
var doc = document;
var document = doc;
可以實(shí)現(xiàn)的話那就太好了……
了解JavaScript的人應(yīng)該知道,JavaScript的變量是在最開(kāi)始的時(shí)候就生成的,所以這里的document就變成了undefined了。
沒(méi)關(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');
@*/
舉一反三,像下面這樣的寫(xiě)法,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中沒(méi)有,則去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ù)的面影響.
您可能感興趣的文章:
- PHP中輸出轉(zhuǎn)義JavaScript代碼的實(shí)現(xiàn)代碼
- 根據(jù)身份證號(hào)自動(dòng)輸出相關(guān)信息(籍貫,出身日期,性別)
- 自動(dòng)輸出類的字段值實(shí)用代碼分享
- javascript數(shù)組輸出的兩種方式
- JavaScript彈出新窗口后向父窗口輸出內(nèi)容的方法
- JavaScript輸出當(dāng)前時(shí)間Unix時(shí)間戳的方法
- javascript實(shí)現(xiàn)實(shí)時(shí)輸出當(dāng)前的時(shí)間
- 用javascript實(shí)現(xiàn)自動(dòng)輸出網(wǎng)頁(yè)文本
相關(guān)文章
BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02利用javascript中的call實(shí)現(xiàn)繼承
利用javascript中的call實(shí)現(xiàn)繼承...2007-01-01javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動(dòng),有一個(gè)div跟隨鼠標(biāo)移動(dòng)的結(jié)果,有一連串跟隨鼠標(biāo)移動(dòng)的效果,感興趣的小伙伴們可以參考一下2016-02-02ie下動(dòng)態(tài)加態(tài)js文件的方法
接觸過(guò)相關(guān)知識(shí)的都知道,動(dòng)態(tài)向DOM中添加js的script標(biāo)簽時(shí),在各種瀏覽器下會(huì)有不同的表現(xiàn)。2011-09-09javascript將數(shù)組插入到另一個(gè)數(shù)組中的代碼
下面的代碼主要功能就是將數(shù)組arr2插入到數(shù)組arr1的index位置,需要的朋友可以參考下2013-01-01解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問(wèn)題
今天小編就為大家分享一篇解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09