解釋: 此測試我在思否已發表, 特意複製到這兒, 讓更多的人看到
其實做過相關測試的部落格已經不少了, 但不自己親身試一下, 死不了這條心. 所以今天恰逢週六,
來用測評筆記本的思維測評一下兩者的效能對比.(本人喜歡在51論壇發部落格, 此論壇是乙個筆記本分享體驗的論壇).
關於這件事情, 大多數人測得結果是原生for效能要好於map, 事實真的是這樣嗎? 看完此篇, 相信你能找到答案.廢話不多說, 現在開始:
測試方法:
1. 建立乙個陣列, 內有33333333項, 然後開始迴圈並記錄時間, 迴圈結束後輸出所耗時長.
2. 每種方式記錄3次時間, 最後算出平均所用時長.
測試說明: 1. 為了確保測試嚴謹, 考慮到此次只針對迴圈效能進行測試, 所以建立陣列的耗時不在統計範圍之內.
2. 考慮到筆記本長時負載cpu有降頻的可能性, 所以不採取耗時過長的測試方法. 當然, 測試也不宜過短,
否則無法說明問題.cpu的pl1一般都設定在28s.所以只要不超過28s就沒問題. 且單項測試完會讓機器恢復到正常溫度.
避免高溫降頻導致的誤差.且每次採用開啟瀏覽器的方式, 不採用重新整理網頁的方式.
3. 因一種資料型別無法說明問題, 所以分別測試陣列內的項為number, string, object的情況所需時長.
4. 我的機器配置: 型號: 戴爾precision m5520. cpu: i5 7440hq. 具體引數為: kabylake架構, 四核四執行緒,
單核睿頻3.8ghz, 四核睿頻3.4ghz. tdp45w.
測試**如下:
let test = 99999; // number
let test = 'abcde'; // string
let test = ; // object
let arr = new array(33333333).fill(test);
console.time();
// 原生for
for (let i = 0; i < arr.length; i++)
// map
arr.map((item, index, arr) => )
console.timeend();
我會分別測試以上三種資料型別, 分別測試3次記錄時間, 分別用for, map兩種方法測試.
實測結果如下:
原生for迴圈 map迴圈
第一次: 459.515625ms 1214.30712890625ms
number 第二次: 457.640869140625ms 1219.38623046875ms
第三次: 466.174072265625ms 1212.14892578125ms
第一次: 455.422119140625ms 1316.40087890625ms
string 第二次: 450.8349609375ms 1315.333251953125ms
第三次: 458.367919921875ms 1308.587158203125ms
第一次: 460.298095703125ms 2399.734130859375ms
object 第二次: 464.030029296875ms 2425.638916015625ms
第三次: 456.2041015625ms 2415.697021484375ms
結論:
1. map和原生for迴圈確實存在效能差異, for比map快2倍到5倍不等.(僅在此次測試中), 而且, 資料越複雜, 兩者效能差距越明顯.
2. 把map的引數去掉時間也是不變的.
3. 原本計畫計算出平均耗時, 其實目前我是一邊測試一邊記錄, 也算半個直播了. 但是測試結果差異太小了, 口算也能算出平均值了. 所以平均值就不計算了.
總結:
1. object項足足有五倍的耗時差距. 是不是有點兒驚訝? 是不是以後打算用map寫**了? 別著急, 且聽細細道來.
2. 首先, 工作中, 並不會出現要迴圈這麼龐大的資料(好吧, 萬萬一你有, 像object這種直接耗時差將近2s, 那確實2s很奢侈了, 是必須採用for).
一般工作中大多數情況下迴圈的時長都不超過1ms(不包括迴圈內資料操作). 所以, 糾結這點兒效能完全沒必要.
3. map迴圈的便捷性, 可維護性. 是for遠遠不能比的. 本人愚見: 離開可維護性, 便捷性只談效能難道不是耍流氓嗎? 而且我們寫**也是為了實現需求,
在實現需求的基礎上再談優化效能.
4. 如果要分析原因的話, 請恕我才疏學淺, 無法下結論.
5. 閒來無事, 只為滿足自己的興趣. 大家全當時耍子. 如有任何不足之處, 還望批評指正, 感謝!
js原生迴圈的使用
不管是js原生自帶的迴圈,還是一些工具包裡面的迴圈 比如jquery裡的 each 裡面的迴圈有多種多樣.作為乙個有強迫症的人,總是想選擇最好的迴圈方式,效率最高的,最優雅的.在這裡我只列舉js自帶的迴圈.雖然一些工具包裡的迴圈看似很強大,但其本質上也是對js迴圈進行了封裝而已,而且如果你不引進這些...
js中的forEach迴圈與map迴圈
在js中進行陣列迴圈時經常會用到foreach方法和map方法，下面就來看一下這兩種遍歷方法的區別。vararray 1,2,3,4,5 var array1 array.foreach function val vararray2 array.map function val console.lo...
Js原生定時迴圈載入資料
以下是定時迴圈載入ajax獲得的資料 var params jquery.ajax intr setinterval function time 注意 s中定時執行,settimeout和setinterval的區別,以及l解除方法 settimeout expression,delaytime 在...