快捷導(dǎo)航

深入理解Javascript中的循環(huán)優(yōu)化

更新時間：2013年11月09日 15:01:41 作者：

這篇文章介紹了Javascript中的循環(huán)優(yōu)化，有需要的朋友可以參考一下

循環(huán)是大多數(shù)編程語言都具備的基本功能，JS也不例外，不同之處在于JS是解釋型語言，運(yùn)行于瀏覽器環(huán)境中，客戶端的軟硬件條件會對JS執(zhí)行效率產(chǎn)生很大的影響。然而客戶端環(huán)境對于開發(fā)者是未知、多樣的，并且難以改變，所以優(yōu)化代碼質(zhì)量是提高代碼效率的主要途徑。
JS代碼中，循環(huán)是比較容易導(dǎo)致性能問題的因素。理解循環(huán)特性進(jìn)而有針對性地進(jìn)行優(yōu)化也許會帶來不錯的性能提升。
for、while、do-while循環(huán)：
這三種循環(huán)本身的循環(huán)效率相差不多，所以只要根據(jù)適合的應(yīng)用場景選擇即可。
以for循環(huán)為例：

復(fù)制代碼代碼如下:

var aValues = ["a", "b", "c", "d"];
for(var i = 0; i < aValues.length; i += 1){
 fDoSomethingA(aValues[i]);
 fDoSomethingA(aValues[i]);
}

上面例子中每次循環(huán)都要比較i與數(shù)組的長度，所以每次都要重新讀取數(shù)組長度，由如果數(shù)組長度在循環(huán)中是不變的，這樣做就沒有必要，我們可以使用局部變量代替length的讀取。同理，例子中，aValues[i]由于被讀取兩次以上，我們也可以將它賦值給局部變量：

復(fù)制代碼代碼如下:

var aValues = ["a", "b", "c", "d"], nLength = aValues.length;
 for(var i = 0, sValue; i < nLength; i += 1){
 sValue = aValues[i];
 fDoSomethingA(sValue);
 fDoSomethingB(sValue);
 }

如果循環(huán)的業(yè)務(wù)邏輯對循環(huán)順序不敏感，可以嘗試倒序循環(huán)，即將計數(shù)器遞減到0。

復(fù)制代碼代碼如下:

var aValues = ["a", "b", "c", "d"], nLength = aValues.length;
 for(var i = nLength, sValue; i -= 1;){
 sValue = aValues[i];
 fDoSomethingA(sValue);
 fDoSomethingB(sValue);
 }

使用這種方式計數(shù)器默認(rèn)與0進(jìn)行比較，連局部變量比較都省略了，理論上也能提高效率。
for-in循環(huán)：
for-in循環(huán)更像在窮舉，他用來遍歷對象屬性，我們知道對象屬性的查找會一直延續(xù)到原型鏈頂端，這將大大降低循環(huán)效率。for-in循環(huán)的寫法上沒有什么優(yōu)化空間，需要在使用時遵循一定原則：盡量只在遍歷數(shù)據(jù)型對象的時候才使用for-in循環(huán)。
如果遍歷對象的屬性是明確的，可以使用數(shù)組循環(huán)替代。
例如遍歷一個聯(lián)系人對象：

復(fù)制代碼代碼如下:

var aContact = ["N", "FN", "EMAIL;PREF", ...];
 for(var i = aContact.length; i -= 1;){
 fDoSomething(aContact[i]);
 }
 

Duff策略
Duff策略的主要原理是通過展開循環(huán)減少次數(shù)來提高效率。例如
一個普通循環(huán):

復(fù)制代碼代碼如下:

for(var i = aValues.length; i -= 1){
 fDoSomething(aValues[i]);
 }
 

如果aValues.length == N，寫成以下這種方式的效率將比循壞來的高:

復(fù)制代碼代碼如下:

fDoSomething(aValues[0]);
 fDoSomething(aValues[1]);
 fDoSomething(aValues[2]);
 fDoSomething(aValues[3]);
 ...
 ...
 fDoSomething(aValues[N-1]);

但如果N很大，這種寫法就不現(xiàn)實(shí)，而Duff策略是一種適中的循環(huán)展開策略。
近日在網(wǎng)易郵箱通訊錄聯(lián)系人的初始化循環(huán)中加入了Duff策略：

復(fù)制代碼代碼如下:

var nLength = aContacts.length,
// 總輪數(shù)
 nRounds = Math.floor( nLength / 8),
// 額外余量
 nLeft = nLength % 8,
i = 0;
// 先處理余量
 if(nLeft){
 do{
 fFormat(aContacts[i ++]);
 }while(-- nLeft)
}
// 每輪執(zhí)行8次格式化
 if(nRounds){
 do{
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 }while(-- nRounds)
 }

如上所示，每輪循環(huán)可以執(zhí)行8個聯(lián)系人數(shù)據(jù)的格式化操作，還有一輪循環(huán)用于處理余下的聯(lián)系人。由此可見，在聯(lián)系人較多的情況下總的循環(huán)次數(shù)大大降低，可以降低循環(huán)的消耗。另外，8是Duff策略提出的最優(yōu)值。
實(shí)際測試時發(fā)現(xiàn)在IE下可以帶來10-20%以上的性能提升，而非IE瀏覽器中幾乎看不到區(qū)別。
結(jié)束語：在測試過程中發(fā)現(xiàn)非IE瀏覽器下，優(yōu)化后和優(yōu)化前的效率差距并不是很大，甚至可以忽略，這說明這些瀏覽器的JS引擎對

您可能感興趣的文章: