首頁技術(shù)文章正文

web前端開發(fā)培訓(xùn)之談一談循環(huán)的性能提升

更新時(shí)間:2016年10月12日14時(shí)40分來源:傳智播客前端與移動(dòng)開發(fā)學(xué)院瀏覽次數(shù):

循環(huán)在任何編程語言中都會(huì)大量的使用，在JS中也不例外。對(duì)于JS來說，循環(huán)也有其特殊之處，這邊筆記主要寫的是JS中性能提升。

·首先要來和大家統(tǒng)一一下概念，下面是for循環(huán)的基本概念

for循環(huán)按照如下順序執(zhí)行：①→②→③→④→②→③→④
所以大家可以看到①循環(huán)初始化語句只執(zhí)行一次，而其他三步每次循環(huán)都執(zhí)行。

·接下來可以從四方面入手，來進(jìn)行性能優(yōu)化

①遞減迭代
正如上面圖片所示，大多數(shù)情況，開發(fā)者喜歡遞增的方式進(jìn)行迭代，即從0開始增加到某個(gè)特定值為止。而事實(shí)上，遞減的迭代會(huì)更高效。

②簡(jiǎn)化循環(huán)條件語句
循環(huán)條件語句再每次循環(huán)都進(jìn)行運(yùn)算，所以要盡量是其精簡(jiǎn)。
先舉一個(gè)反例

for(var i = 0; i < document.images.length; i++){
//處理document.images[i]
}

在這個(gè)例子中，由于循環(huán)條件語句每次循環(huán)都執(zhí)行，所以他每次都會(huì)進(jìn)行一次document.images的遍歷，而通常DOM操作是非常耗時(shí)的。
我們可以嘗試做下面的優(yōu)化：

for(var i = 0, len = document.images.length; i < len ; i++){
//處理document.images[i]
}

把循環(huán)條件語句中的DOM訪問結(jié)果緩存歷來，這樣整個(gè)循環(huán)只會(huì)訪問一次DOM了，大大提升了性能。

在所有的瀏覽器中，通過將HTML容器上需要遍歷的次數(shù)緩存起來都會(huì)大大提升速度。其中在Safari 3中速度會(huì)提高兩倍，而在IE7中速度會(huì)提高170倍

③簡(jiǎn)化循環(huán)體
循環(huán)體是執(zhí)行最多的，所以要確保其被最大限度地優(yōu)化。應(yīng)該盡量移除哪些密集的計(jì)算。

④合并循環(huán)條件和更新語句

var i, someArray = [];
for(i = someArray.length; i--;){
//處理someArray[i]
}

上面的代碼中，將循環(huán)用到的變量聲明都提前，這樣可以提升一部分效率；條件語句為i--，這樣使得i同0比較，而不是與數(shù)組的長(zhǎng)度比較，這樣也挺高了效率；
此外還去除了更新語句。

（文章轉(zhuǎn)載于：前端網(wǎng)）

本文版權(quán)歸傳智播客web前端開發(fā)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端開發(fā)培訓(xùn)學(xué)院
首發(fā)：http://metathetuscanyresort.com/web/

上一篇：web前端開發(fā)培訓(xùn)之前端開發(fā)必會(huì)的二十五個(gè)知識(shí)點(diǎn) 下一篇：web前端開發(fā)培訓(xùn)之超強(qiáng)的JS總結(jié)（一）