📜 ⬆️ ⬇️

Primitive performance comparison of search and indexOf in Javascript

I constantly meet the recommendation to use, when it is reasonable, the usual search instead of regular expressions , since the latter are much slower. But never seen how much slower and when they become more efficient. But the itch of peace does not give and I decided to compare them and see what tsiferki can be seen in reality ...


So, take the usual page and do a search for the lines in it. I took my own document and searched for the id on the “run_test” button. It looks trite:
for (i=0;i<100000;i++) { string .indexOf( 'run_test' ); }

for (i=0;i<100000;i++) { string .search( 'run_test' ); }

* This source code was highlighted with Source Code Highlighter .
for (i=0;i<100000;i++) { string .indexOf( 'run_test' ); }

for (i=0;i<100000;i++) { string .search( 'run_test' ); }

* This source code was highlighted with Source Code Highlighter .

But, since the hard one pulled me to take an id, I thought and added for comparison a sample of an element from a regular jQuery.
for (i=0;i<100000;i++) { $( '#run_test' ); }

for (i=0;i<100000;i++) { document .getElementById( 'run_test' ); }

* This source code was highlighted with Source Code Highlighter .
for (i=0;i<100000;i++) { $( '#run_test' ); }

for (i=0;i<100000;i++) { document .getElementById( 'run_test' ); }

* This source code was highlighted with Source Code Highlighter .

Well, I tried it on different browsers:
image

We look at the result and draw conclusions:
')
Firstly, direct search is more than an order of magnitude faster than regulars, which means that 2-3 or even a dozen indexOf instead of search will be “justified”, but in reality, if there are not thousands of them in loaded cycles, such optimization will not have the effect .

Secondly, Chrome is really smart :) And if the FF, showing the same numbers on indexOf, was practically cut off from the outside world inside the cycles, then Chrome continued to cheer up the gif, and on the whole it wasn’t possible to load it with such simple things. Opera seems to have chosen a reasonable compromise, normally working out the events and blinking pictures, not particularly slowing down on regulars.
FF still has some oddity - the first few tests show good speed on regexps, but then the speed drops more than twice. Maybe he decided that this script loads it too?

Next jQuery. Despite the fact that in the end there is an id through getElementById, several checks are made before that and everything is on regexps. Of course, almost 20 microseconds of weather do not, but this is another argument in favor of chains of methods.
The figures for IE are around 70 ... on such primitive tests, of course, one cannot say anything definite, but a relatively sharp drop in performance, with a slight increase in complexity usually indicates an unnecessarily complicated architecture. If I do not give up this stupid lesson, it will be necessary to check the presence of the shelf with tests of medium complexity, this will mean an unnecessarily large number of options. Either there will be rampant growth :) IE he is - he can! :)

A little surprised that getElementById was so unhurried.

As a bonus - you can touch and see the original script. Additions and comments are welcome.

Source: https://habr.com/ru/post/68282/


All Articles