巧用局部變量提升javascript性能
更新時間：2014年02月24日 15:44:36 作者：
巧用局部變量可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下
javascript中一個標(biāo)識符所在的位置越深，它的讀寫速度也越慢。因此，函數(shù)中讀寫局部變量總是最快的，而讀寫全局變量通常是最慢的。一個好的經(jīng)驗(yàn)法則是：如果某個跨作用域的值在函數(shù)中被引用一次以上，那么就把它存儲到局部變量里。
例如：
<!-- 優(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是個全局對象。搜索該變量的過程必須遍歷整個作用域鏈接，直到最后在全局變量對象中找到。你可以通過以下方法減少對性能的影響:先將全局變量的引用存儲在一個局部變量中，然后使用這個局部變量代替全局變量。
例如：
<!-- 優(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是個全局對象。搜索該變量的過程必須遍歷整個作用域鏈接，直到最后在全局變量對象中找到。你可以通過以下方法減少對性能的影響:先將全局變量的引用存儲在一個局部變量中，然后使用這個局部變量代替全局變量。
例如：
復(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時遇到的一些小問題,需要的朋友可以參考下。2010-12-12
JavaScript中的Error錯誤對象與自定義錯誤類型詳解
Error是JavaScript中最原始的錯誤對象，作為各種異常的基礎(chǔ)對象，還有多個衍生的具體的錯誤類型，這些錯誤對象類型在nodejs中也可應(yīng)用，這篇文章主要介紹了JavaScript中的Error錯誤對象與自定義錯誤類型,需要的朋友可以參考下2022-12-12
JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動代碼
在某些情況下需要這樣的功能:使用JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動，接下來為大家詳細(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ū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
原生js實(shí)現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果
本文主要介紹了原生js實(shí)現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果的實(shí)例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
追蹤discord.js中刪除消息的用戶方法實(shí)例詳解
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
javascript中的void運(yùn)算符語法及使用介紹
void是javascript中的一個操作符，void會計算表達(dá)式的值，但是會丟棄表達(dá)式的返回值接下來將詳細(xì)介紹下，感興趣的你可以參考下或許對你有所幫助2013-03-03
這篇文章主要介紹了webpack常用配置總覽(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JS函數(shù)節(jié)流和函數(shù)防抖問題分析
這篇文章主要介紹了JS函數(shù)節(jié)流和函數(shù)防抖問題分析，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12