Is optimizing JavaScript for loops really necessary?

by

First, I should say that this answer is written in 2011 and these things change over time (as browser interpreters optimize more and more things) so if you really want to know the current state of the world, you have to run tests on current browsers.

Run your own jsperf test on any version of IE. There you will see a consistent difference between the two methods or many other old browsers. You apparently only ran it on Chrome which is so fast and so optimized that there is a negligible difference between the two methods. On IE9 (which is likely way better than IE7 and IE8), the method which pre-caches the length is 31% faster.

A jsperf test designed for this question gives quantitative results on this question. In questions like this one should just go to jsperf to see what the real difference is rather than so much speculation.

It shows a difference in the browsers I tried that ranges from almost no difference to a pretty sizable difference depending upon the browser. In Chrome, there’s almost no difference. In IE9, storing the length first is almost 50% faster.

Now, whether this speed difference matters to your scripts depends on the specific code. If you had a huge array that you were looping through frequently, it could make a meaningful difference in some browsers to use this form:

for (var i = 0, len = list.length; i < len; i++) {
    // do code here
}

In a slightly different test case when using live pseudo arrays returned by some DOM functions, there was still a difference in speed, but not as magnified (I expected the difference to be greater on DOM pseudo live arrays, but it wasn’t).

In practice, I tend to use the short version (less typing) when I don’t think my section of code is speed critical and/or the array is not large and I would use the longer version that pre-caches the length if I am consciously thinking about speed or the array is huge or I’m doing a lot of iterations over the same array.

There are a couple other programming reasons to pre-cache the length. If you will be adding elements to the end of the array during the loop and you don’t want to the loop to iterate over those newly added elements, then you will NEED to pre-load the length and only iterate over the initially present elements.

for (var i = 0, len = list.length; i < len; i++) {
    if (list[i] == "whatever") {
        list.push("something");
    }
}

Keep in mind that browsers are continually evolving and adding more and more optimizations so an optimization that shows great benefit in 2011 may be essentially built into a more modern browser in the future so the hand coded optimization is no longer needed. So, if you’re trying to optimize something for today’s performance, you have to test in today’s browsers, you can’t just rely on things you read that may be a few years old.

More Related Contents:

  1. Are loops really faster in reverse?
  2. I want to print odd numbers using javascript [closed]
  3. Not looping through for loop – javascript
  4. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  5. Loop through an array in JavaScript
  6. How do I loop through or enumerate a JavaScript object?
  7. Why is using “for…in” for array iteration a bad idea?
  8. Why is my function call that should be scheduled by setTimeout executed immediately? [duplicate]
  9. What’s the fastest way to loop through an array in JavaScript?
  10. Javascript efficiency: ‘for’ vs ‘forEach’ [closed]
  11. Unobtrusive JavaScript: at the top or the bottom of the HTML code?
  12. How to stop intense Javascript loop from freezing the browser
  13. Does use of anonymous functions affect performance?
  14. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  15. Why is iterating through an array backwards faster than forwards
  16. Does the tag position in HTML affects performance of the webpage?
  17. For-loop performance: storing array length in a variable
  18. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  19. Javascript: hiding prototype methods in for loop?
  20. Javascript (jQuery) performance measurement and best practices (not load time)
  21. How to loop through key/value object in Javascript? [duplicate]
  22. How do I add a delay in a JavaScript loop?
  23. Access outside variable in loop from Javascript closure [duplicate]
  24. Which browsers support ?
  25. Why cache jQuery objects?
  26. Firestore slow performance issue on getting data
  27. Why most JavaScript native functions are slower than their naive implementations?
  28. javascript for loop counter coming out as string [duplicate]
  29. Strange behavior in Javascript enhanced for…in loop
  30. Why is pop faster than shift?

Leave a Comment