減少訪問(wèn)DOM的次數(shù)提升javascript性能
更新時(shí)間：2014年02月24日 15:06:24 作者：
訪問(wèn)修改DOM元素都會(huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化，下面為大家介紹下javascript性能提升方法,需要的朋友可以參考下
訪問(wèn)DOM元素是有代價(jià)的，修改DOM元素則更為昂貴，因?yàn)樗鼤?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化。
當(dāng)然，最壞的情況是在循環(huán)中訪問(wèn)修改元素，尤其是對(duì)HTML元素集合循環(huán)操作。
例如：
<!-- 優(yōu)化前 -->
<script type="text/javascript">
function innerHTMLLoop () {
for(var count = 0; count < 15000; count++){
document.getElementById('here').innerHTML+='a';
}
}
</script>
這個(gè)函數(shù)循環(huán)修改頁(yè)面元素的內(nèi)容。這段代碼的問(wèn)題在于，每次循環(huán)迭代，該元素都被訪問(wèn)兩次：一次讀取innerHTML屬性，另外一次重寫它。
一個(gè)效率更高的做法是使用局部變量存儲(chǔ)更新后的內(nèi)容，然后在循環(huán)結(jié)束后一次性寫入：
<!-- 優(yōu)化后 -->
<script type="text/javascript">
function innerHTMLLoop () {
var content = '';
for(var count = 0; count < 15000; count++){
content+='a';
}
document.getElementById('here').innerHTML+=content;
}
</script>
訪問(wèn)DOM的次數(shù)越多，代碼運(yùn)行速度越慢。因此，在有其他方案可以代替的時(shí)候，我們要盡量減少訪問(wèn)DOM的次數(shù)。
當(dāng)然，最壞的情況是在循環(huán)中訪問(wèn)修改元素，尤其是對(duì)HTML元素集合循環(huán)操作。
例如：
復(fù)制代碼 代碼如下:
<!-- 優(yōu)化前 -->
<script type="text/javascript">
function innerHTMLLoop () {
for(var count = 0; count < 15000; count++){
document.getElementById('here').innerHTML+='a';
}
}
</script>
這個(gè)函數(shù)循環(huán)修改頁(yè)面元素的內(nèi)容。這段代碼的問(wèn)題在于，每次循環(huán)迭代，該元素都被訪問(wèn)兩次：一次讀取innerHTML屬性，另外一次重寫它。
一個(gè)效率更高的做法是使用局部變量存儲(chǔ)更新后的內(nèi)容，然后在循環(huán)結(jié)束后一次性寫入：
復(fù)制代碼 代碼如下:
<!-- 優(yōu)化后 -->
<script type="text/javascript">
function innerHTMLLoop () {
var content = '';
for(var count = 0; count < 15000; count++){
content+='a';
}
document.getElementById('here').innerHTML+=content;
}
</script>
訪問(wèn)DOM的次數(shù)越多，代碼運(yùn)行速度越慢。因此，在有其他方案可以代替的時(shí)候，我們要盡量減少訪問(wèn)DOM的次數(shù)。
相關(guān)文章
javascript頁(yè)面加載完執(zhí)行事件代碼
本篇文章主要是對(duì)javascript頁(yè)面加載完執(zhí)行事件的代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
JavaScript實(shí)現(xiàn)alert彈框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)alert彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點(diǎn)擊觸發(fā)js彈出層,滑過(guò)觸發(fā)js彈出層,帶動(dòng)畫效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。2015-05-05
JavaScript 申明函數(shù)的三種方法 每個(gè)函數(shù)就是一個(gè)對(duì)象（一）
JavaScript 申明函數(shù)的三種方法 每個(gè)函數(shù)就是一個(gè)對(duì)象（一）2009-12-12
webpack DllPlugin xxx is not defined解決辦法
這篇文章主要介紹了webpack DllPlugin xxx is not defined解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript針對(duì)cookie的基本操作實(shí)例詳解
這篇文章主要介紹了javascript針對(duì)cookie的基本操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript操作cookie的基本技巧,并給出了一個(gè)JavaScript操作cookie的完整類,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JS實(shí)現(xiàn)帶導(dǎo)航城市列表以及輸入搜索功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)帶導(dǎo)航城市列表以及輸入搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法，需要的朋友可以參考一下2013-03-03
JS基于MSClass和setInterval實(shí)現(xiàn)ajax定時(shí)采集信息并滾動(dòng)顯示的方法
這篇文章主要介紹了JS基于MSClass和setInterval實(shí)現(xiàn)ajax定時(shí)采集信息并滾動(dòng)顯示的方法,涉及JavaScript頁(yè)面元素定時(shí)滾動(dòng)操作及ajax調(diào)用實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09