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