How to do it more efficiently?

Question

Let\'s imagine we should get some data...

var data = [];

//some code omitted that might fill in the data (though might not)

Then we need t

Answer 1

I don't think it's worth checking whether to execute the for loop based on the length of data as it probably won't make much difference performance-wise if the for loop is only executed a few times.

But generally it is faster to get the length first rather than putting it as i as it'll need to access the variable each time. As for which way is the most efficient to loop through data, different browsers are optimized for different kinds of loops. However, it's only IE which is seriously slow (orders of magnitude slower than other browsers in the below tests) so I think optimizing for other browsers may not be worth it.

Here's the results for the following benchmarks (the fastest indicated by + and slowest indicated by -):

           FF      Chrome  Safari  Opera   IE6      IE7      IE8 
Method 1  +0.163+  0.221   0.246   0.269  -11.608- -12.214- -7.657-
Method 2   0.175  +0.133+  0.176  +0.147+   8.474    8.752   3.267
Method 3   0.206   0.235   0.276   0.245    8.002    8.539   3.651
Method 4   0.198   0.372   0.447   0.390   +6.562+  +7.020+  2.920
Method 5   0.206   0.372   0.445  -0.400-   6.626    7.096  +2.905+
Method 6   0.176   0.167  +0.175+  0.223    7.029    8.085   3.167
Method 7  -0.263- -0.567- -0.449-  0.413    6.925    7.431   3.242

Method 1: Using "standard" for loops:

for (var i=0; i

Method 2: Using "standard" for loops, assigning length so it doesn't have to access each time:

for (var i=0, len=data.length; i

Method 3: This is similar to the method jQuery uses in $.each(). Note the assigning to len so that it doesn't have to get the length every time.

for (var x=data[0], len=data.length, i=0; i

Method 4: Using while loops, going forwards. WARNING: needs each item in the array to evaluate to true, i.e. not false, 0, null, undefined, '' etc!

var x, i=0
while (x = data[i++]) {}

Method 5: The same as method 4, only using for to do the same:

for (var x,i=0; x=data[i++];) {}

Method 6: Looping through the loop backwards using while:

var i = data.length
while (i--) {
    var x = data[i]
}

Method 7: Using method 4/method 5, but without needing items to evaluate to true, replacing x = data[i++]:

var x, i=0, len=data.length
while ((x=data[i++]) || i

This first checks whether data[i++] evaluates to true then checks whether it's the last item so it can have similar performance in IE with fewer problems with null and false etc in the arrays. Note that when using while vs for in this case there wasn't a noticeable difference, but I prefer while as I think it's more clear.

I generally don't like to optimize unless there's a specific long-running task as it often comes at a cost of readability - please only do it if you've got a specific case where you've got lots of data to load etc :-)

EDIT: Because methods 4/5 were so fast on IE, added a version with fewer side effects.

EDIT 2: Redid all of the tests, this time without any browser extensions and over a longer period of time. Here's the code for the sake of completeness (sorry for making this post so long:)

function Tmr() {
    this.tStart = new Date()
}

Tmr.prototype = {
    Time: function() {
        var tDate = new Date()
        var tDiff = tDate.getTime() - this.tStart.getTime()
        var tDiff = tDiff / 1000.0 // Convert to seconds
        return tDiff
    }
}

function normalfor(data) {
    for (var i=0; i