DIV CSS 佈局教程網

循環是大多數編程語言都具備的基本功能，JS也不例外，不同之處在於JS是解釋型語言，運行於浏覽器環境中，客戶端的軟硬件條件會對JS執行效率產生很大的影響。然而客戶端環境對於開發者是未知、多樣的，並且難以改變，所以優化代碼質量是提高代碼效率的主要途徑。
JS代碼中，循環是比較容易導致性能問題的因素。理解循環特性進而有針對性地進行優化也許會帶來不錯的性能提升。

for、while、do-while循環：
這三種循環本身的循環效率相差不多，所以只要根據適合的應用場景選擇即可。
以for循環為例：

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

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

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);
} 
如果循環的業務邏輯對循環順序不敏感，可以嘗試倒序循環，即將計數器遞減到0。

 var aValues = ["a", "b", "c", "d"], nLength = aValues.length;
for(var i = nLength, sValue; i -= 1;){
 sValue = aValues[i];
 fDoSomethingA(sValue);
 fDoSomethingB(sValue);
}
使用這種方式計數器默認與0進行比較，連局部變量比較都省略了，理論上也能提高效率。
for-in循環：
for-in循環更像在窮舉，他用來遍歷對象屬性，我們知道對象屬性的查找會一直延續到原型鏈頂端，這將大大降低循環效率。for-in循環的寫法上沒有什麼優化空間，需要在使用時遵循一定原則：盡量只在遍歷數據型對象的時候才使用for-in循環。
如果遍歷對象的屬性是明確的，可以使用數組循環替代。
例如遍歷一個聯系人對象：
 
var aContact = ["N", "FN", "EMAIL;PREF", ...];
for(var i = aContact.length; i -= 1;){
 fDoSomething(aContact[i]);
} 

Duff策略
Duff策略的主要原理是通過展開循環減少次數來提高效率。例如
一個普通循環:
for(var i = aValues.length; i -= 1;){
 fDoSomething(aValues[i]);
} 

如果aValues.length == N，寫成以下這種方式的效率將比循壞來的高:
 
fDoSomething(aValues[0]);
fDoSomething(aValues[1]);
fDoSomething(aValues[2]);
fDoSomething(aValues[3]);
...
...
fDoSomething(aValues[N-1]); 

但如果N很大，這種寫法就不現實，而Duff策略是一種適中的循環展開策略。
近日在網易郵箱通訊錄聯系人的初始化循環中加入了Duff策略：
var nLength = aContacts.length,
// 總輪數
nRounds = Math.floor( nLength / 8),
// 額外余量
nLeft = nLength % 8,
i = 0;
// 先處理余量
if(nLeft){
  do{
   fFormat(aContacts[i ++]);
  }while(-- nLeft)
}
// 每輪執行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)
} 

如上所示，每輪循環可以執行8個聯系人數據的格式化操作，還有一輪循環用於處理余下的聯系人。由此可見，在聯系人較多的情況下總的循環次數大大降低，可以降低循環的消耗。另外，8是Duff策略提出的最優值。
實際測試時發現在IE下可以帶來10-20%以上的性能提升，而非IE浏覽器中幾乎看不到區別。
結束語：在測試過程中發現非IE浏覽器下，優化後和優化前的效率差距並不是很大，甚至可以忽略，這說明這些浏覽器的JS引擎對循環做了很好的優化，對開發者是非常友好的表現，無奈IE6、7、8下差距很明顯，但這符合我們預期。因此，趕快對JS代碼中的對循環進行優化吧！