Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript Performance: How come looping through an array and checking every value is faster than indexOf, search and match?

This came as a huge surprise for me, and I'd like to understand this result. I made a test in jsperf that is basically supposed to take a string (that is part of a URL that I'd like to check) and checks for the presence of 4 items (that are in fact, present in the string).

It checks in 5 ways:

  1. plain indexOf;
  2. Split the string, then indexOf;
  3. regex search;
  4. regex match;
  5. Split the string, loop through the array of items, and then check if any of them matches the things it's supposed to match

To my huge surprise, number 5 is the fastest in Chrome 21. This is what I can't explain.

In Firefox 14, the plain indexOf is the fastest, that one I can believe.

like image 726
João Pinto Jerónimo Avatar asked Aug 02 '12 09:08

João Pinto Jerónimo


People also ask

Which array method is faster in JavaScript?

Comparison of performance of loops available in JavaScript : In case of multiple iterations of the loop, and where the size of array is too large, for loop is the preference as the fastest method of elements' iteration. While loops perform efficient scaling in case of large arrays.

Is array find faster than for loop?

js. To our surprise, for-loops are much faster than the Array.

What is faster than for loop in JavaScript?

forEach loop The forEach method in Javascript iterates over the elements of an array and calls the provided function for each element in order. The execution time of forEach is dramatically affected by what happens inside each iteration. It is fast and designed for functional code.


1 Answers

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.

like image 124
Aaron Digulla Avatar answered Sep 18 '22 12:09

Aaron Digulla