JavaScript Performance – Why Looping Through an Array is Faster Than Native indexOf

I'm also surprised but Chrome uses v8, a highly optimized JavaScript engine which pulls all kinds of tricks. And the guys at Google probably have the largest set of JavaScript to run to test the performance of their implementation. So my guess is this happens:

1. The compiler notices that the array is a string array (type can be determine at compile time, no runtime checks necessary).
2. In the loop, since you use ===, builtin CPU op codes to compare strings (repe cmpsb) can be used. So no functions are being called (unlike in any other test case)
3. After the first loop, everything important (the array, the strings to compare against) is in CPU caches. Locality rulez them all.

All the other approaches need to invoke functions and locality might be an issue for the regexp versions because they build a parse tree.

When benchmarking smaller values, the overhead operations can have a bigger impact on the test.

For example, if variable initialization and memory allocation takes 0.1 ms, this is negligible with n > 1000, however significant with n = 10.

In this case, the for/of operator allows the V8 engine to optimize the loop operation (reducing the overheads like above). For example it may pre-load the array items onto the stack or similar.

The for/let operation will process each item independent of the whole array, and is more explicit in variable usage (reducing the amount of optimization the engine can do).