教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


本文版權歸傳智播客web前端開發(fā)培訓學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：傳智播客web前端開發(fā)培訓學院
首發(fā)：http://xamj520.com/web/
0 分享到：
和我們在線交談！