querySelectorAll for loop is faster

[tomByrer]

The "Ditching jQuery with querySelectorAll" is very timely; I was planning to rewrite some jQuery utilities to plain JS!

Seems that a `for` loop is faster than `forEach`, unless you're targeting IE10 ;)
http://jsperf.com/queryselectorall-jquery/2
(I'm not a JS expert; please point out or fork if I did something wrong.)
Unlikely to matter to desktop browsers, could help mobile & server performance.
I wonder how much memory each version will use?

cheers

[Joshua Clanton]

Hi Tom,

You're right that a for loop is faster than forEach. However, there are a couple of other factors that might impact performance.

I created a fork here so that you can get a better breakdown of where the extra time is coming from: http://jsperf.com/queryselectorall-jquery/3

For me, the real question is whether the loop is part of a critical path. If it is, definitely use a for loop. If not, use the construct that most clearly conveys what it is you are trying to do.

Hope this helps!

Joshua Clanton

[tomByrer]

Thanks for the reply & improving on my test!  Neat trick with the `.prototype`.

Never know if someone might copy/paste your code into something that does have a "critical path" (eg run in Node).  I'm sure mobile users would be happier if you saved them 0.01% of their battery also ;)

I think I picked up a habit of reading comments rather than code for clarity after years of optimizing DSP in assembly.  So I would have added a `//[].forEach` line before the loop to remind myself & others I"m actually looping an array.

On Tuesday, November 12, 2013 8:34:59 AM UTC-7, Joshua Clanton wrote:

You're right that a for loop is faster than forEach. However, there are a couple of other factors that might impact performance.

I created a fork here so that you can get a better breakdown of where the extra time is coming from: http://jsperf.com/queryselectorall-jquery/3

For me, the real question is whether the loop is part of a critical path. If it is, definitely use a for loop. If not, use the construct that most clearly conveys what it is you are trying to do.

[PAEz]

hehe, micro optimizations vs readability....theres a drip ;P

Your going to drive yourself nutty if you keep testing every little thing Tom.

Especially when your tests end up different in the real world.

So often we make tests with tiny bits of code, but the results can actually be different when used in a function surrounded by other code that makes it harder for the browser to optimize then....more variables and what not.

That said the oldschool stuff almost always beats the new cool functions.  I myself have gone through the same as you tom, being taught in the old days by demo coders made me obsessed with speed :P and it can still bug me how little modern coders seem to care....just buy a faster computer with more ram, yeah, thatll fix my code.