schteppe / p2.js

JavaScript 2D physics library
Other
2.64k stars 330 forks source link

Why use !== in for loops? #195

Closed jstoeffler closed 8 years ago

jstoeffler commented 8 years ago

So, I was looking at the code, and I found that some for loops (like this one) use

 for(var i=0; i!==something ...

when I'm more used to the classical

for (var i = 0; i <something ...

or the apparently "Improved Native" suggested by Sublime Text

   for (var i = something - 1; i >= 0 ...

So I was wondering why this choice. I thought that it could be a performance optimisation. I was a bit bored with my work, so I decided to make a performance test:

var superiorFunction = function(iterations){
    for (var i = iterations - 1; i >= 0; i--) {
    };
}
var inferiorFunction = function(iterations){
    for (var i = 0; i < iterations; i++) {
    };
}
var notEqualFunction = function(iterations){
    for (var i = 0; i !== iterations; i++) {
    };
}

// Warmup
superiorFunction(100);
notEqualFunction(100);
inferiorFunction(100);

var startSup = new Date()
superiorFunction(1000000000);
var endSup = new Date()
console.log('Superior in:' + (endSup.getTime() - startSup.getTime()) );

var startNotEqual = new Date()
notEqualFunction(1000000000);
var endNotEqual = new Date()
console.log('Not equal in:' + (endNotEqual.getTime() - startNotEqual.getTime()) );

var startInferior = new Date()
inferiorFunction(1000000000);
var endInferior = new Date()
console.log('Inferior in:' + (endInferior.getTime() - startInferior.getTime()) );

And it turns out that apparently the !== version has significantly worse performances:

Superior in:1048
Not equal in:**1395**
Inferior in:1052

(Chrome Mac)

While I understand that it's probably not an issue for the end product (the loop costs probably nothing compared to the actual computation), it brings back my original question: why this choice?

schteppe commented 8 years ago

Initially I chose it because it was faster in my own tests. I think the fastest choice was while(i--). But this might have changed as browsers constantly change their implementation.

If you find that some other loop style is faster in the majority of the major browsers, I'm willing to change :)

jtenner commented 8 years ago

It's hard to have a really nuanced opinion on the type of loop one should use in JavaScript.

I'm pretty sure the logical answer in this case is "pick the smallest loop that minifies to the smallest amount of code in each individual case."

Each browser is always going to get faster, but load performance can be optimized on our end.

jstoeffler commented 8 years ago

Thanks for the answers, I was more curious than thinking of an improvement.

I agree, it's hard to tell, as things change a lot, and it's environment dependent. Plus, repeating myself, I don't believe it has any significant impact on the product.

I'm closing the issue, as I now know the reason :)

I'll make some profiling on a real product soon, I'll let you know if I find things that can be improved.