巧用局部變量提升javascript性能
更新時(shí)間:2014年02月24日 15:44:36 作者:
巧用局部變量可以有效提升javascript性能,下面有個(gè)不錯(cuò)的示例,大家可以參考下
javascript中一個(gè)標(biāo)識(shí)符所在的位置越深,它的讀寫速度也越慢。因此,函數(shù)中讀寫局部變量總是最快的,而讀寫全局變量通常是最慢的。一個(gè)好的經(jīng)驗(yàn)法則是:如果某個(gè)跨作用域的值在函數(shù)中被引用一次以上,那么就把它存儲(chǔ)到局部變量里。
例如:
<!-- 優(yōu)化前 -->
<script type="text/javascript">
function initUI () {
var bd = document.body,
links = document.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
}
document.getElementById("go-btn").onclick = function(){
start();
}
bd.className = "active";
}
</script>
該函數(shù)引用了三次document,而document是個(gè)全局對(duì)象。搜索該變量的過程必須遍歷整個(gè)作用域鏈接,直到最后在全局變量對(duì)象中找到。你可以通過以下方法減少對(duì)性能的影響:先將全局變量的引用存儲(chǔ)在一個(gè)局部變量中,然后使用這個(gè)局部變量代替全局變量。
例如:
<!-- 優(yōu)化后 -->
<script type="text/javascript">
function initUI () {
var doc=document,
bd = doc.body,
links = doc.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
}
doc.getElementById("go-btn").onclick = function(){
start();
}
bd.className = "active";
}
</script>
例如:
復(fù)制代碼 代碼如下:
<!-- 優(yōu)化前 -->
<script type="text/javascript">
function initUI () {
var bd = document.body,
links = document.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
}
document.getElementById("go-btn").onclick = function(){
start();
}
bd.className = "active";
}
</script>
該函數(shù)引用了三次document,而document是個(gè)全局對(duì)象。搜索該變量的過程必須遍歷整個(gè)作用域鏈接,直到最后在全局變量對(duì)象中找到。你可以通過以下方法減少對(duì)性能的影響:先將全局變量的引用存儲(chǔ)在一個(gè)局部變量中,然后使用這個(gè)局部變量代替全局變量。
例如:
復(fù)制代碼 代碼如下:
<!-- 優(yōu)化后 -->
<script type="text/javascript">
function initUI () {
var doc=document,
bd = doc.body,
links = doc.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
}
doc.getElementById("go-btn").onclick = function(){
start();
}
bd.className = "active";
}
</script>
相關(guān)文章
js操作textarea方法集合封裝(兼容IE,firefox)
在DOM里面操作textarea里面的字符,是比較麻煩的。于是我有這個(gè)封裝分享給大家,測(cè)試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。2011-02-02javascript實(shí)現(xiàn)右下角廣告框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)右下角廣告框效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02微信小程序 獲取手機(jī)號(hào) JavaScript解密示例代碼詳解
這篇文章主要介紹了微信小程序 獲取手機(jī)號(hào) JavaScript解密的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05JavaScript控制網(wǎng)頁(yè)層收起和展開效果的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁(yè)層收起和展開效果的方法,涉及javascript操作網(wǎng)頁(yè)元素動(dòng)態(tài)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法示例
這篇文章主要介紹了ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法,結(jié)合實(shí)例形式分析了ES6中數(shù)組、Math和擴(kuò)展操作符的新特性、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04