JavaScript loop performance - Why is to decrement the iterator toward 0 faster than incrementing

I'm not sure about Javascript, and under modern compilers it probably doesn't matter, but in the "olden days" this code:

for (i = 0; i < n; i++){
  .. body..
}

would generate

move register, 0
L1:
compare register, n
jump-if-greater-or-equal L2
-- body ..
increment register
jump L1
L2:

while the backward-counting code

for (i = n; --i>=0;){
  .. body ..
}

would generate

move register, n
L1:
decrement-and-jump-if-negative register, L2
.. body ..
jump L1
L2:

so inside the loop it's only doing two extra instructions instead of four.

I believe the reason is because you're comparing the loop end point against 0, which is faster than comparing against < length (or another JS variable).

It is because the ordinal operators <, <=, >, >= are polymorphic, so these operators require type checks on both the left and right sides of the operator to determine what comparison behaviour should be used.

There are some very good benchmarks available here:

What's the Fastest Way to Code a Loop in JavaScript

It is easy to say that an iteration can have less instructions. Let’s just compare these two:

for (var i=0; i<length; i++) {
}

for (var i=length; i--;) {
}

When you count each variable access and each operator as one instruction, the former for loop uses 5 instructions (read i, read length, evaluate i<length, test (i<length) == true, increment i) while the latter uses just 3 instructions (read i, test i == true, decrement i). That is a ratio of 5:3.

What about using a reverse while loop then:

var values = [1,2,3,4,5]; 
var i = values.length; 

/* i is 1st evaluated and then decremented, when i is 1 the code inside the loop 
   is then processed for the last time with i = 0. */
while(i--)
{
   //1st time in here i is (length - 1) so it's ok!
   process(values[i]);
}

IMO this one at least is a more readble code than for(i=length; i--;)

for increment vs. decrement in 2017

In modern JS engines incrementing in for loops is generally faster than decrementing (based on personal Benchmark.js tests), also more conventional:

for (let i = 0; i < array.length; i++) { ... }

It depends on the platform and array length if length = array.length has any considerable positive effect, but usually it doesn't:

for (let i = 0, length = array.length; i < length; i++) { ... }

Recent V8 versions (Chrome, Node) have optimizations for array.length, so length = array.length can be efficiently omitted there in any case.

There is an even more "performant" version of this. Since each argument is optional in for loops you can skip even the first one.

var array = [...];
var i = array.length;

for(;i--;) {
    do_teh_magic();
}

With this you skip even the check on the [initial-expression]. So you end up with just one operation left.

I've been exploring loop speed as well, and was interested to find this tidbit about decrementing being faster than incrementing. However, I have yet to find a test that demonstrates this. There are lots of loop benchmarks on jsperf. Here is one that tests decrementing:

http://jsperf.com/array-length-vs-cached/6

Caching your array length, however (also recommended Steve Souders' book) does seem to be a winning optimization.

in modern JS engines, the difference between forward and reverse loops is almost non-existent anymore. But the performance difference comes down to 2 things:

a) extra lookup every of length property every cycle

//example:
    for(var i = 0; src.length > i; i++)
//vs
    for(var i = 0, len = src.length; len > i; i++)

this is the biggest performance gain of a reverse loop, and can obviously be applied to forward loops.

b) extra variable assignment.

the smaller gain of a reverse loop is that it only requires one variable assignment instead of 2

//example:
    var i = src.length; while(i--)

I've conducted a benchmark on C# and C++ (similar syntax). There, actually, the performance differs essentially in for loops, as compared to do while or while. In C++, performance is greater when incrementing. It may also depend on the compiler.

In Javascript, I reckon, it all depends on the browser (Javascript engine), but this behavior is to be expected. Javascript is optimized for working with DOM. So imagine you loop through a collection of DOM elements you get at each iteration, and you increment a counter, when you have to remove them. You remove the 0 element, then 1 element, but then you skip the one that takes 0's place. When looping backwards that problem disappears. I know that the example given isn't just the right one, but I did encounter situations where I had to delete items from an ever-changing object collection.

Because backward looping is more often inevitable than forward looping, I am guessing that the JS engine is optimized just for that.

Have you timed it yourself? Mr. Sounders might be wrong with regards to modern interpreters. This is precisely the sort of optimization in which a good compiler writer can make a big difference.

I am not sure if it's faster but one reason i see is that when you iterate over an array of large elements using increment you tend to write:

for(var i = 0; i < array.length; i++) {
 ...
}

You are essentially accessing the length property of the array N (number of elements) times. Whereas when you decrement, you access it only once. That could be a reason.

But you can also write incrementing loop as follows:

for(var i = 0, len = array.length; i < len; i++) {
 ...
}

It's not faster (at least in modern browsers):

// Double loops to check the initialization performance too
const repeats = 1e3;
const length = 1e5;

console.time('Forward');
for (let j = 0; j < repeats; j++) {
  for (let i = 0; i < length; i++) {}
}
console.timeEnd('Forward'); // 58ms

console.time('Backward');
for (let j = repeats; j--;) {
  for (let i = length; i--;) {}
}
console.timeEnd('Backward'); // 64ms

The difference is even bigger in case of an array iteration:

const repeats = 1e3;
const array = [...Array(1e5)];

console.time('Forward');
for (let j = 0; j < repeats; j++) {
  for (let i = 0; i < array.length; i++) {}
}
console.timeEnd('Forward'); // 34ms

console.time('Backward');
for (let j = 0; j < repeats; j++) {
  for (let i = array.length; i--;) {}
}
console.timeEnd('Backward'); // 64ms

My Chrome version: Version 134.0.6998.118 (Official Build) (64-bit).

So i've tested fastest loop method for both Map and Arrays in my Chrome console (lol), and here's what i found:

If you are using a Map, the fastest way to loop over it is to use the traditional looping method, without any special method, not even using size cache (which is called length cache if it's an array) or even a post-increment.

Here is the code that you can try yourself:

let map = new Map();

for (let i = 0; 1e3 > i; ++i) map.set(i, Math.random());

const startTime = performance.now();
for (let i = 0; i < map.size; i++) {
    console.log(map.get(i));
}
const endTime = performance.now();
const result = endTime - startTime;
console.clear();

console.info(`delay: ${result} miliseconds`);

If you are looping over an Array, things get different for some reason. If the length of the Array is in the thousands range or less, it's best to use this code:

let array = [];

for (let i = 0; 1e3 > i; ++i) array.push(Math.random());

const startTime = performance.now();
for (let i = 0, arrayLength = array.length; i < arrayLength; ++i) {
    console.log(array[i]);
}
const endTime = performance.now();
const result = endTime - startTime;
console.clear();

console.info(`delay: ${result} miliseconds`);

However, if the length of the array is in the tens of thousands or more, it's best to use the decrement looping method.

Here is the code that you can try:

let array = [];

for (let i = 0; 1e4 > i; ++i) array.push(Math.random());

const startTime = performance.now();
for (let i = array.length, h = i; --i;) {
    console.log(array[i]);
    if (1 === i) h = 0, console.log(array[h]); else continue;
}
const endTime = performance.now();
const result = endTime - startTime;
console.clear();

console.info(`delay: ${result} miliseconds`);

Keep in mind that different browsers, environment, etc., may result in different results.