Home > Developer > JavaScript
The reason why jQuery's Each performance is much slower than JS's native for loop performance is that jqueryeachjs
In fact, looking at the jQuery source code, we found that the each code is very simple, but why is the performance dozens of times different from that of the native for loop?
Core code of jQuery's each
for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if (value === false) { break; } }
It looks simple, but why is it much slower?
Write the test code as follows:
Var length = 300000; function GetArr () {var t = []; for (var I = 0; I <length; I ++) {t [I] = I ;} return t;} function each1 (obj, callback) {var I = 0; var length = obj. length for (; I <length; I ++) {value = callback (I, obj [I]);/* if (value = false) {removed break;} */} function each2 (obj, callback) {var I = 0; var length = obj. length for (; I <length; I ++) {value = callback (I, obj [I]);/* remove call */if (value = false) {break ;}} function each3 (obj, callback) {var I = 0; var length = obj. length for (; I <length; I ++) {value = callback. call (obj [I], I, obj [I]);/* Self-written call */if (value = false) {break ;}}} function Test1 () {var t = GetArr (); var date1 = new Date (). getTime (); var lengtharr = t. length; var total = 0; each1 (t, function (I, n) {total + = n ;}); var date12 = new Date (). getTime (); console. log ("1 Test" + (date12-date1);} function Test2 () {var t = GetArr (); var date1 = new Date (). getTime (); var total = 0; each2 (t, function (I, n) {total + = n ;}); var date12 = new Date (). getTime (); console. log ("2 Test" + (date12-date1);} function Test3 () {var t = GetArr (); var date1 = new Date (). getTime (); var total = 0; each3 (t, function (I, n) {total + = n ;}); var date12 = new Date (). getTime (); console. log ("3 Test" + (date12-date1);} function Test4 () {var t = GetArr (); var date1 = new Date (). getTime (); var total = 0; $. each (t, function (I, n) {total + = n ;}); var date12 = new Date (). getTime (); console. log ("4 Test" + (date12-date1 )));}
Run the test and find that the difference between the first and the second is not very large, which indicates that the performance difference caused by the break judgment is very small, but the second and third, the fourth deviation is more than doubled, and the second and third difference is that the call is called. It seems that the call will cause performance loss because the call will switch the context, of course, there are other reasons for jQuery's slow each. It also calls other methods in the loop. call is only one reason.
Therefore, call, and apply are both performance-consuming methods in js. We recommend that you use them less when the performance requirements are strict.
The following code shows the comparison of jquery's each and js native for loop Performance.
<Html xmlns = "http://www.w3.org/1999/xhtml">Input and Output:
For Loop execution time: 1
Each loop execution time: 3The two results directly explain the problem.
The above is the reason why jQuery's Each is much slower than JS's native for loop performance. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
