Javascript各種循環測試，達夫設備可用性分析

原創 hmking 2019-02-22 19:34

?　《High Performance JavaScript》一書對於JavaScript中的如何提高循環的性能介紹的十分詳盡，自己寫了些簡單的代碼進行了測試，測試結果竟然出乎意料。

?　首先需要說明的是，本次測試的瀏覽器版本爲Mozilla Firefox V7.01、基於chrome內核的傲遊V3.1.8.1000，至於IE8那個廢材我實在無語(系統是XP，IE9裝不了無法測試)。

?　書中的主要觀點主要有下面幾個：

?　1、除 for-in循環外，其他循環類型性能相當，難以確定哪種循環更快。選擇循環類型應基於需求而不是性能。

?　2、減少迭代的工作量，包括減少對象成員和數組項查找的次數、如果數組元素的處理順序與任務無關使用倒序循環可以略微提高循環性能。

?　3、減少迭代次數，介紹了最廣爲人知的限制循環迭代次數的模式稱作“達夫設備”。

 

?　倒序循環

?　首先出問題的是倒序循環，一般在正常的循環中，每次運行循環體都要發生如下幾個操作：

?　1.在控制條件中讀一次屬性（items.length），如果緩存了數組的長度，這一條可忽略

?　2.在控制條件中執行一次比較（i < items.length）

?　3. 比較操作，察看條件控制體的運算結果是不是 true（i < items.length == true）

?　4. 一次自加操作（i++）

?　5. 一次數組查找（items[i]）

?　6. 一次函數調用（process(items[i])）

?　在倒序循環中，每次迭代中只進行如下操作：

?　1.在控制條件中進行一次比較（i == true）

?　2.一次減法操作（i--）

?　3.一次數組查詢（items[i]）

?　4.一次函數調用（process(items[i])）

?　倒序循環減少了操作，那麼性能的提高雖說很微弱，但應該是百分百確定的對不？但是我測試的結果卻不盡然，簡單說一下測試代碼，首先創建一個長度爲10000的數組，每一項爲長度4-10的字符，每個循環體要進行的操作是判斷字符串是否爲全數字，如果是，值累加1，最後每種循環都循環100次，做三次測試。先上代碼：

  1. var chars = '0123456789abcdef'; 
  2.  
  3. function getRandomString() { 
  4.     var len = Math.ceil(Math.random() * 7) + 3; // 4-10 
  5.     var result = ""; 
  6.     while (len--) { 
  7.         result += chars.charAt(Math.floor(Math.random() * chars.length)); 
  8.     } 
  9.     return result; 
  10. } 
  11.  
  12. var size = 10000; 
  13. var mult = 100; 
  14.  
  15. var ary = []; 
  16. var lsize = size; 
  17. while (lsize--) { ary.push('' + getRandomString() + ''); } 
  18.  
  19. function for_in() { 
  20.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  21.     for (var i in ary) { 
  22.         var item = i; 
  23.         if (isInt.test(item)) { item += 1; } 
  24.     } 
  25. } 
  26.  
  27. function for_normal() { 
  28.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  29.     for (var i = 0, len = ary.length; i < len; i++) { 
  30.         var item = ary[i]; 
  31.         if (isInt.test(item)) { item += 1; } 
  32.     } 
  33. } 
  34.  
  35. function for_reverse() { 
  36.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  37.     for (var i = ary.length; i--; ) { 
  38.         var item = ary[i]; 
  39.         if (isInt.test(item)) { item += 1; } 
  40.     } 
  41. } 
  42.  
  43. function while_normal() { 
  44.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  45.             i = 0, 
  46.             l = ary.length; 
  47.     while (i < l) { 
  48.         var item = ary[i++]; 
  49.         if (isInt.test(item)) { item += 1; } 
  50.     } 
  51. } 
  52.  
  53. function while_reverse() { 
  54.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  55.             i = ary.length; 
  56.     while (i--) { 
  57.         var item = ary[i]; 
  58.         if (isInt.test(item)) { item += 1; } 
  59.     } 
  60. } 
  61.  
  62. function do_while_normal() { 
  63.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  64.             i = 0, 
  65.             l = ary.length; 
  66.     do { 
  67.         var item = ary[i++]; 
  68.         if (isInt.test(item)) { item += 1; } 
  69.     } while (i < l) 
  70. } 
  71.  
  72. function do_while_reverse() { 
  73.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  74.             i = ary.length - 1; 
  75.     do { 
  76.         var item = ary[i]; 
  77.         if (isInt.test(item)) { item += 1; } 
  78.     } while (i--) 
  79. } 
  80.  
  81. console.log('數組長度：' + ary.length); 
  82. console.log('Profiling will begin in 2 seconds...'); 
  83. setTimeout(function () { 
  84.     var currTime; 
  85.     for (var k = 0; k < 3; k++) { 
  86.         console.log('第' + (k + 1) + '次循環測試：') 
  87.         currTime = new Date(); 
  88.         console.profile(); 
  89.         for (var i = 0; i < mult; i++) { 
  90.             for_in(); 
  91.             for_normal(); 
  92.             for_reverse(); 
  93.             while_normal(); 
  94.             while_reverse(); 
  95.             do_while_normal(); 
  96.             do_while_reverse(); 
  97.         } 
  98.         console.profileEnd(); 
  99.         console.log('用時：' + (new Date() - currTime) + 'ms'); 
  100.     } 
  101. }, 2000); 
?　測試n次後發現，while、do-while都要比for循環要快些，for尋找只是偶爾比前兩個快，在火狐下do-while要被while快些，在chrome下不明顯。
?　fox循環的倒序循環性能略微提升比較確定，但是不管在火狐還是在chrome下while、do-while的正循環都要快於倒序循環，這是咋回事？別問我，我也不知......

?　再上測試的截屏，這裏不得不讚Firebug，它的profile可不chrome強多了，不過性能還是比不上chrome，尤其後面達夫設備的測試跟是明顯。
 

 

?　在達夫設備測試之前先進行另外一項測試，一上面的for循環爲例，如果把循環體內對數組項的操作單獨另寫一個函數，然後在循環內調用，性能會有什麼樣的影響呢？

  1. var chars = '0123456789abcdef'; 
  2.  
  3. function getRandomString() { 
  4.     var len = Math.ceil(Math.random() * 7) + 3; // 4-10 
  5.     var result = ""; 
  6.     while (len--) { 
  7.         result += chars.charAt(Math.floor(Math.random() * chars.length)); 
  8.     } 
  9.     return result; 
  10. } 
  11.  
  12. var size = 10000; 
  13. var mult = 100; 
  14.  
  15. var ary = []; 
  16. var lsize = size; 
  17. while (lsize--) { ary.push('' + getRandomString() + ''); } 
  18.  
  19. function process(item) { 
  20.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  21.     if (isInt.test(item)) { item += 1; } 
  22. } 
  23.  
  24. function for_normal_fn() { 
  25.     for (var i = 0, len = ary.length; i < len; i++) { process(ary[i]); } 
  26. } 
  27.  
  28. function for_normal() { 
  29.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  30.     for (var i = 0, len = ary.length; i < len; i++) { 
  31.         var item = ary[i]; 
  32.         if (isInt.test(item)) { item += 1; } 
  33.     } 
  34. } 
  35.  
  36. console.log('數組長度：' + ary.length); 
  37. console.log('Profiling will begin in 2 seconds...'); 
  38. setTimeout(function () { 
  39.     console.log('普通for循環測試：') 
  40.     var currTime = new Date(); 
  41.     console.profile(); 
  42.     for (var i = 0; i < mult; i++) { 
  43.         for_normal(); 
  44.     } 
  45.     console.profileEnd(); 
  46.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  47.  
  48.     console.log('for循環內調用外部函數測試：') 
  49.     currTime = new Date(); 
  50.     console.profile(); 
  51.     for (var i = 0; i < mult; i++) { 
  52.         for_normal_fn(); 
  53.     } 
  54.     console.profileEnd(); 
  55.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  56.  
  57. }, 2000); 

?　測試的結果：調用外部函數的for循環比之前的for循環所用的時間，火狐下多了二十倍，chrome沒那麼誇張，也多用的50ms左右，同是瀏覽器，差距咋就這麼大呢（火狐你也要堅強些，因爲IE在這測試裏連說話的資格也沒有，哈哈）......

 
 
?　達夫設備
 
?　這裏摘抄一下書中關於達夫設備的基本理念：每次循環中最多可 8 次調用 process()函數。循環迭代次數爲元素總數除以8。 因爲總數不一定是 8的整數倍， 所以 startAt 變量存放餘數， 指出第一次循環中應當執行多少次 process()。比方說現在有 12 個元素，那麼第一次循環將調用 process()4次，第二次循環調用 process()8 次，用 2 次循環代替了 12次循環。
 
?　下面我們比較一下for、while、Duff's Device三種循環：
 
  1. var chars = '0123456789abcdef'; 
  2.  
  3. function getRandomString() { 
  4.     var len = Math.ceil(Math.random() * 7) + 3; // 4-10 
  5.     var result = ""; 
  6.     while (len--) { 
  7.         result += chars.charAt(Math.floor(Math.random() * chars.length)); 
  8.     } 
  9.     return result; 
  10. } 
  11.  
  12. var size = 10000; 
  13. var mult = 100; 
  14.  
  15. var ary = []; 
  16. var lsize = size; 
  17. while (lsize--) { ary.push('' + getRandomString() + ''); } 
  18.  
  19. function for_normal() { 
  20.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  21.     for (var i = 0, len = ary.length; i < len; i++) { 
  22.         var item = ary[i]; 
  23.         if (isInt.test(item)) { item += 1; } 
  24.     } 
  25. } 
  26.  
  27. function while_normal() { 
  28.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  29.             i = 0, 
  30.             l = ary.length; 
  31.     while (i < l) { 
  32.         var item = ary[i++]; 
  33.         if (isInt.test(item)) { item += 1; } 
  34.     } 
  35. } 
  36.  
  37. function duff_fast() { 
  38.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  39.             item, i = 0, 
  40.             l = ary.length, 
  41.             n = l % 8; 
  42.     while (n--) { 
  43.         item = ary[i++]; 
  44.         if (isInt.test(item)) { item += 1; } 
  45.     } 
  46.  
  47.     n = parseInt(l / 8); 
  48.     while (n--) { 
  49.         item = ary[i++]; 
  50.         if (isInt.test(item)) { item += 1; } 
  51.         item = ary[i++]; 
  52.         if (isInt.test(item)) { item += 1; } 
  53.         item = ary[i++]; 
  54.         if (isInt.test(item)) { item += 1; } 
  55.         item = ary[i++]; 
  56.         if (isInt.test(item)) { item += 1; } 
  57.         item = ary[i++]; 
  58.         if (isInt.test(item)) { item += 1; } 
  59.         item = ary[i++]; 
  60.         if (isInt.test(item)) { item += 1; } 
  61.         item = ary[i++]; 
  62.         if (isInt.test(item)) { item += 1; } 
  63.         item = ary[i++]; 
  64.         if (isInt.test(item)) { item += 1; } 
  65.     } 
  66. } 
  67.  
  68. console.log('數組長度：' + ary.length); 
  69. console.log('Profiling will begin in 2 seconds...'); 
  70. setTimeout(function () { 
  71.     console.log('普通for循環測試：') 
  72.     var currTime = new Date(); 
  73.     console.profile(); 
  74.     for (var i = 0; i < mult; i++) { 
  75.         for_normal(); 
  76.     } 
  77.     console.profileEnd(); 
  78.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  79.  
  80.     console.log('普通while循環測試：') 
  81.     var currTime = new Date(); 
  82.     console.profile(); 
  83.     for (var i = 0; i < mult; i++) { 
  84.         while_normal(); 
  85.     } 
  86.     console.profileEnd(); 
  87.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  88.  
  89.     console.log('達夫設備循環測試：') 
  90.     currTime = new Date(); 
  91.     console.profile(); 
  92.     for (var i = 0; i < mult; i++) { 
  93.         duff_fast(); 
  94.     } 
  95.     console.profileEnd(); 
  96.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  97. }, 2000); 

?　經過n次測試，發現while、Duff's Device要比for要快，而while與Duff's Device竟然也不分伯仲啊，這、這、這.....while咋就這麼強呢......

?　還有一點達夫設備實際上把八次迭代合在一次迭代中，如果每次對數組項的操作代碼量較少的情況下你可以像上面的代碼一樣簡單的複製八次，但是如果操作量大一些的話爲了便於閱讀和調試源代碼，你就必須把操作代碼包裝到另外一個process函數中，然後在達夫設備調用此函數，還記得我們前面的關於for循環調用外部函數的測試嗎？性能就會差太多了，可以看下面的測試：

  1. var chars = '0123456789abcdef'; 
  2.  
  3. function getRandomString() { 
  4.     var len = Math.ceil(Math.random() * 7) + 3; // 4-10 
  5.     var result = ""; 
  6.     while (len--) { 
  7.         result += chars.charAt(Math.floor(Math.random() * chars.length)); 
  8.     } 
  9.     return result; 
  10. } 
  11.  
  12. var size = 10000; 
  13. var mult = 100; 
  14.  
  15. var ary = []; 
  16. var lsize = size; 
  17. while (lsize--) { ary.push('' + getRandomString() + ''); } 
  18.  
  19. function process(item) { 
  20.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  21.     if (isInt.test(item)) { item += 1; } 
  22. } 
  23.  
  24. function for_normal() { 
  25.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; 
  26.     for (var i = 0, len = ary.length; i < len; i++) { 
  27.         var item = ary[i]; 
  28.         if (isInt.test(item)) { item += 1; } 
  29.     } 
  30. } 
  31.  
  32. function while_normal() { 
  33.     var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/, 
  34.             i = 0, 
  35.             l = ary.length; 
  36.     while (i < l) { 
  37.         var item = ary[i++]; 
  38.         if (isInt.test(item)) { item += 1; } 
  39.     } 
  40. } 
  41.  
  42. function duff_normal() { 
  43.     var i = 0, 
  44.             l = ary.length, 
  45.             n = l % 8; 
  46.     while (n--) { 
  47.         process(ary[i++]); 
  48.     } 
  49.  
  50.     n = parseInt(l / 8); 
  51.     while (n--) { 
  52.         process(ary[i++]); 
  53.         process(ary[i++]); 
  54.         process(ary[i++]); 
  55.         process(ary[i++]); 
  56.         process(ary[i++]); 
  57.         process(ary[i++]); 
  58.         process(ary[i++]); 
  59.         process(ary[i++]); 
  60.     } 
  61. } 
  62.  
  63. console.log('數組長度：' + ary.length); 
  64. console.log('Profiling will begin in 2 seconds...'); 
  65. setTimeout(function () { 
  66.     console.log('普通for循環測試：') 
  67.     var currTime = new Date(); 
  68.     console.profile(); 
  69.     for (var i = 0; i < mult; i++) { 
  70.         for_normal(); 
  71.     } 
  72.     console.profileEnd(); 
  73.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  74.  
  75.     console.log('普通while循環測試：') 
  76.     var currTime = new Date(); 
  77.     console.profile(); 
  78.     for (var i = 0; i < mult; i++) { 
  79.         while_normal(); 
  80.     } 
  81.     console.profileEnd(); 
  82.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  83.  
  84.     console.log('達夫設備調用外部函數循環測試：') 
  85.     currTime = new Date(); 
  86.     console.profile(); 
  87.     for (var i = 0; i < mult; i++) { 
  88.         duff_normal(); 
  89.     } 
  90.     console.profileEnd(); 
  91.     console.log('用時：' + (new Date() - currTime) + 'ms'); 
  92.  
  93. }, 2000); 

?　看到測試結果了吧，慘不忍睹啊......還是用while、do-while循環吧......

?　苦苦的苦瓜 2011-10-10
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript核心原理解析

wy53780 2020-04-23 14:02:41

再学JavaScript ES(6-10)全版本语法大全

wy53780 2020-04-23 13:58:55

前端埋点 - 报错监控

mriliujy 2019-07-11 16:14:54

JavaScript ES2019 中的 8 項新功能

前端高達 2019-02-24 13:48:04

用JavaScript刷新框架子頁面的方法

princesstor015 2019-02-23 13:37:36

分享Javascript開發經驗

yuncash 2019-02-23 13:25:11

AJAX入門教程理解JavaScript中的函數

剛剛 2019-02-23 12:57:19

深度解析JavaScript事件對象之信用盤源碼出售

yihujiu 2019-02-23 12:54:46

JavaScript 圖片滑動切換效果

53856943 2019-02-23 00:35:22

JavaScript 無縫上下左右滾動加定高定寬停頓效果

53856943 2019-02-23 00:35:18

起點沒有選對，想找好的前端工作只能越找越累

麪包理想 2019-02-23 00:25:54

css佈局簡史與決勝未來的第四代css佈局技術

麪包理想 2019-02-23 00:25:51

jquery 或者說javascript中的加法運算

wanqiufeng 2019-02-23 00:19:36

【玖哥亂彈】編程語言間的鬥爭

東風玖哥 2019-02-23 00:10:03

for循環

yujq_me 2019-02-23 00:17:50