Comparing jQuery each function vs. javascript for loop for iterating through a large array.<\/p>\n
We're assuming that the jQuery method would be measurably slower, as it must be a wrapper for a JavaScript loop function, thus only adding overhead. Maybe jQuery will surprise us!<\/p>\n
\t \t Well, we got results we expected, but found that the fault doesn't lie with jQuery alone. The browser itself plays a much larger role in the execution time gap. See below.<\/p>\n Safari 5.0.4<\/strong> IE 8.0<\/strong> Internet Explorer closes the gap a little bit, but only to demonstrate how slowly it executes JavaScript in comparison to other browsers!<\/p>\n","protected":false},"excerpt":{"rendered":" Comparing jQuery each function vs. javascript for loop for iterating through a large array. We're assuming that the jQuery method would be measurably slower, as…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[83],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/179"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":180,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions\/180"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\/\/ create test array with 100,000 elements
\n\ttestArray = new Array();
\n\tfor (i = 0; i < 100000; i++)
\n\t testArray[i] = i;<\/code>
\n\t
\n\t\/\/jQuery $.each
\n\tstart = new Date().getMilliseconds();
\n\t $.each(testArray, function(key, value) {
\n\t dummy = key; \/\/ simple code, as we're more interested in the loop execution time itself, not the code within
\n\t });
\n\tstop = new Date().getMilliseconds();
\n\tjQueryExecutionTime = stop - start;<\/code><\/p>\n\/\/ vanilla for loop
\n\tstart = new Date().getMilliseconds();
\n\t arraySize = testArray.length;
\n\t for(i = 0; i < arraySize; i++)
\n\t dummy = i;
\n\tstop = new Date().getMilliseconds();
\n\tvanillaExecutionTime = stop - start;<\/code><\/p>\n\/\/ results
\n\tdocument.write('jQuery each: ' + jQueryExecutionTime + ' milliseconds<br \/>');
\n\tdocument.write('standard for loop: ' + vanillaExecutionTime + ' milliseconds');<\/code>
\n\t <\/p>\n
\n\tFirefox 3.6
\n\t<\/strong>jQuery each: 71 milliseconds
\n\tstandard for loop: 1 milliseconds
\n\t<\/strong><\/p>\n
\n\tjQuery each: 3 milliseconds
\n\tstandard for loop: 1 milliseconds
\n\t<\/strong>
\n\tChrome 5.0.4<\/strong>
\n\tjQuery each: 10 milliseconds
\n\tstandard for loop: 2 milliseconds<\/p>\n
\n\tjQuery each: 78 milliseconds
\n\tstandard for loop: 62 milliseconds
\n\t<\/strong><\/p>\n