巧用局部變量提升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)文章
本文將詳細(xì)介紹JavaScript中“+”的一些錯(cuò)誤應(yīng)用，需要的朋友可以參考下2012-12-12
js操作textarea方法集合封裝(兼容IE,firefox)
在DOM里面操作textarea里面的字符，是比較麻煩的。于是我有這個(gè)封裝分享給大家，測(cè)試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。2011-02-02
這篇文章主要為大家介紹了javascript異步編程，從淺入深的學(xué)習(xí)javascript異步編程，對(duì)javascript異步編程感興趣的小伙伴們可以參考一下2016-01-01
javascript實(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-05
代碼分片是webpck打包工具所特有的一項(xiàng)技術(shù)，通過這項(xiàng)功能可以把代碼按照特定的形式進(jìn)行拆分，使用戶不必一次全部加載，而是按需加載。本文就來詳細(xì)介紹，感興趣的可以了解一下2021-07-07
編輯浪子版表單驗(yàn)證類...2007-05-05
TypeScript創(chuàng)建一個(gè)簡單Web應(yīng)用
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個(gè)簡單Web應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
JavaScript控制網(wǎng)頁層收起和展開效果的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁層收起和展開效果的方法,涉及javascript操作網(wǎng)頁元素動(dòng)態(tài)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法示例
這篇文章主要介紹了ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法,結(jié)合實(shí)例形式分析了ES6中數(shù)組、Math和擴(kuò)展操作符的新特性、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04