巧用局部變量提升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時(shí)遇到的一些小問題,需要的朋友可以參考下。2010-12-12
JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型詳解
Error是JavaScript中最原始的錯(cuò)誤對(duì)象，作為各種異常的基礎(chǔ)對(duì)象，還有多個(gè)衍生的具體的錯(cuò)誤類型，這些錯(cuò)誤對(duì)象類型在nodejs中也可應(yīng)用，這篇文章主要介紹了JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型,需要的朋友可以參考下2022-12-12
JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
在某些情況下需要這樣的功能:使用JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)，接下來為大家詳細(xì)介紹下實(shí)現(xiàn)方法，感興趣的朋友可以參考下哈2013-04-04
js的for in循環(huán)和java里foreach循環(huán)的區(qū)別分析
這篇文章主要介紹了js的for in循環(huán)和java里foreach循環(huán)的區(qū)別,實(shí)例分析了js的for in循環(huán)使用技巧并說明了與Java中foreach循環(huán)的使用區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
原生js實(shí)現(xiàn)網(wǎng)頁頂部自動(dòng)下拉/收縮廣告效果
本文主要介紹了原生js實(shí)現(xiàn)網(wǎng)頁頂部自動(dòng)下拉/收縮廣告效果的實(shí)例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
追蹤discord.js中刪除消息的用戶方法實(shí)例詳解
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
javascript中的void運(yùn)算符語法及使用介紹
void是javascript中的一個(gè)操作符，void會(huì)計(jì)算表達(dá)式的值，但是會(huì)丟棄表達(dá)式的返回值接下來將詳細(xì)介紹下，感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03
這篇文章主要介紹了webpack常用配置總覽(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JS函數(shù)節(jié)流和函數(shù)防抖問題分析
這篇文章主要介紹了JS函數(shù)節(jié)流和函數(shù)防抖問題分析，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12