循環(huán)處理是最常見的編程模式之一，也是提升性能必須關(guān)注的要點之一。
常見的優(yōu)化方案有：
①JavaScript的四種循環(huán)(for、do-while、while、for-in)中，for-in循環(huán)比其他幾種明顯要慢。由于每次迭代操作會同時搜索實例或原型屬性，for-in循環(huán)的每次迭代都會產(chǎn)生更多的開銷，所以比其他類型要慢。因此遍歷一個屬性數(shù)量有限的已知屬性列表，可以這樣優(yōu)化：
var props = ['prop1', 'prop2'],i = 0;whlie(i < props.length){ precess(object[props[i++]]);}該代碼只關(guān)注給定的屬性，減少了循環(huán)的開銷。
而對于，for、while、do-while。我在chrome下測試了一下，先創(chuàng)建一個大小為1000000的數(shù)組，每項乘100再疊加。
測試用例：
window.onload = function(){var items = Array(1000000).join(',').split(',').map(function(item, index) { return index;}); console.log(forCircle()) console.log(whileCircle()) console.log(doCircle())function forCircle(){console.profile();var currTime = new Date(); var tal = 0; for(var i = 0;i < items.length; i++){ tal = tal + process(items[i]); } console.profileEnd(); console.log('forCircle用時：' + (new Date() - currTime) + 'ms'); return tal;}function whileCircle(){console.profile();var currTime = new Date(); var tal = 0; var j = 0; while (j < items.length){ tal = tal + process(items[j++]); } console.profileEnd(); console.log('whileCircle用時：' + (new Date() - currTime) + 'ms'); return tal;}function doCircle(){console.profile();var currTime = new Date(); var tal = 0; var k = 0; do{ tal = tal + process(items[k++]); }while (k < items.length) console.profileEnd(); console.log('doCircle用時：' + (new Date() - currTime) + 'ms'); return tal;}function process(item){ return item*100;}}取某次測試結(jié)果：
平均來說，for循環(huán)耗時8ms，while耗時4ms，doWhile耗時也是4ms。for是最慢的。
②減少迭代的工作量。把數(shù)組長度保存在局部變量中再遍歷、顛倒數(shù)組的遍歷順序。
最常見的一個循環(huán)：
for(var i = 0;i < items.length; i++){ process(items[i]);}//var j = 0;while (j < items.length){ process(items[j++]);}//var k = 0;do{ process(items[k++]);}while (k < items.length)在這個循環(huán)中，每次運行都會產(chǎn)生如下操作：
①查找一次屬性（items.length）
②執(zhí)行數(shù)值比較一次（i < items.length）
③查看控制條件是否為true（i < items.length ==true）
④一次自增操作(i++)
⑤一次數(shù)組查找(items[i])
⑥一次函數(shù)調(diào)用（process(items[i])）
若把數(shù)組長度存到一個局部變量，那么就不需要每次都查找一次items.length，也就提高了性能。
改為這樣：
for(var i = 0, len = items.length;i < len; i++){ process(items[i]);}//var j = 0,count = items.length;while (j < count){ process(items[j++]);}//var k = 0,num = items.length;do{ process(items[k++]);}while (k < num)這樣在大多數(shù)瀏覽器中能節(jié)省大概25%的運行時間（IE中甚至可以節(jié)省50%）。總的來說，循環(huán)次數(shù)大的情況下，運行時間確實有提升。取某次結(jié)果如下:
沒有局部存量存儲數(shù)組長度時：
有局部變量存儲數(shù)組長度時：
③減少迭代次數(shù)，“Duffs Device”即“達(dá)夫設(shè)備“循環(huán)體展開技術(shù)。適合于迭代次數(shù)較大的情況下。
摘抄一下書中達(dá)夫設(shè)備的基本理念：每次循環(huán)中最多可 8 次調(diào)用 process()函數(shù)。循環(huán)迭代次數(shù)為元素總數(shù)除以8。 因為總數(shù)不一定是 8的整數(shù)倍， 所以 startAt 變量存放余數(shù)， 指出第一次循環(huán)中應(yīng)當(dāng)執(zhí)行多少次 process()。比方說現(xiàn)在有 12 個元素，那么第一次循環(huán)將調(diào)用 process()4次，第二次循環(huán)調(diào)用 process()8 次，用 2 次循環(huán)代替了 12次循環(huán)。
基本模式：
var iterations = Math.floor(items.length/8), startAt = items.length%8, i = 0; do{ switch(startAt){ case 0 : process(items[i++]); case 7 : process(items[i++]); case 6 : process(items[i++]); case 5 : process(items[i++]); case 4 : process(items[i++]); case 3 : process(items[i++]); case 2 : process(items[i++]); case 1 : process(items[i++]); } startAt = 0; }while(--iterations); ④基于函數(shù)的迭代比基于循環(huán)的迭代消耗性能更多。例：for循環(huán)迭代與forEach函數(shù)迭代。
⑤優(yōu)化if-else，通常來說，switch比if-else快，但是在判斷條件較多時，使用查找表比if-else和switch都快。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
