這篇比較JQuery each 和 ES6 foreach效能。
效能比較
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
Test case(ES6 Native):
var linkEls = document.querySelectorAll('link[href*=".min.css"]');
[].forEach.call(linkEls,function(el){});
Test case(jQuery):
$('link[href*=".min.css"]').each(function(){});
|
Result & Conclusion:
1
2
3
4
5
| forEach (Native) : forEach (Native) x 338,628 ops/sec ±2.48% (62 runs sampled)
each (jQuery) : each (jQuery) x 265,555 ops/sec ±3.18% (62 runs sampled)
Fastest: forEach (Native)
Slowest: each (jQuery)
|