Avoid intermediate arrays (parsing strings) to make you Javascript fast

In the previous post there was argued why we should avoid intermediate arrays for performance in cases like filter/map chains.

I'd say String#split() is heavily overused when parsing strings. A common scenario is to get the first word in a string. The first thought is to split a string into words and get the first one. Again, an intermediate array is created, worse, only the first element is used, the rest is just waste of space and time. Use String#indexOf() and String#slice() instead:

let $length = 1;
const str = Array.from({length: $length + 1}, () => 'test').join(' ');

// @benchmark Array#split
str.split(' ')[0];

// @benchmark String#indexOf
str.slice(0, str.indexOf(' '));

// @benchmark regex
str.match(/^\S+/)[0];

` Chrome/125
-----------------------------------------------------------------------------------------------
>                       n=1        |       n=10        |       n=100       |       n=1000      
String#indexOf   ■ 1.00x x100m 972 | ■ 1.00x x100m 959 | ■ 1.00x  x10m  94 |  ■ 1.00x x100m 967
regex              2.99x  x10m 291 |   3.06x  x10m 293 |   3.07x  x10m 289 |    2.96x  x10m 286
Array#split        6.49x  x10m 631 |  22.52x   x1m 216 | 165.96x x100k 156 | 1509.82x  x10k 146
----------------------------------------------------------------------------------------------- `
` Firefox/126
------------------------------------------------------------------------------------------------
>                       n=1        |       n=10        |       n=100       |       n=1000       
String#indexOf   ■ 1.00x x100m 105 | ■ 1.00x x100m 120 | ■ 1.00x x100m 108 |   ■ 1.00x x100m 109
regex             35.90x  x10m 377 |  27.83x  x10m 334 |  33.15x  x10m 358 |    32.11x  x10m 350
Array#split       39.05x  x10m 410 | 105.00x   x1m 126 | 944.44x x100k 102 | 10000.00x  x10k 109
------------------------------------------------------------------------------------------------ `

Open in the playground

Comments

[Samuel Rouse]

I've been enjoying this series!

If you only need one word/piece of the string, then .indexOf() and .slice() make sense. In most cases where I am using .split() I want all the parts.

I would also be interested to see a comparison against a regex for this purpose...

str.match(/^(\w+) /i);

Maybe a more generic regex like /^(\S+) /i would be more appropriate?

[Alexander Nenashev]

added /^\S+/, /^\w+/ is the same.

[Nicolas Dellazzeri]

Great job! I've read all of your articles about performance. Good source of knowledge.

If you don't mind answering. How did you manage to think and benchmark about those performance issues? When the trigger comes out, and you think "omg, why I'm doing this thing this way"? Is this related to the study of algorithms?

[Alexander Nenashev]

it was related to my work, when working with big backend data and/or long UI lists I encountered some performance issues and ended up comparing different solutions to write faster Javascript. I always wanted my web sites working faster for better UX.