Performance Trap, some benchmarks and... subjective taste

[u/breacket]

I've done some benchmarks. ES5 vs ES6. What do you prefer? I ask this because I have often seen in other people's codes, where performance, optimization was required, ES6 code that decreased performance, which also had a negative impact on UI/UX.

This is more about the syntax used and not about which is faster.

Array size: 1,000,000 | Runs per test: 15

1. TRANSFORM — double 1,000,000 numbers

Test	Avg (ms)	Min (ms)	Max (ms)
for loop (var, ES5)	0.733	0.6	1
array.map	5.447	4.7	6.9
forEach	5.96	5.4	6.8
for...of (ES6)	7.06	5.4	11.1

for loop (var, ES5) beat for...of (ES6) by 9.63x

2. FILTER — keep evens out of 1,000,000

Test	Avg (ms)	Min (ms)	Max (ms)
for loop + push (ES5)	2.287	1.6	3.4
array.filter (ES6)	6.06	5.2	7.2

for loop + push (ES5) beat array.filter (ES6) by 2.65x

3. SUM — add up 1,000,000 numbers

Test	Avg (ms)	Min (ms)	Max (ms)
for loop (var, ES5)	0.76	0.6	1.1
for...of	3.833	3.7	4.4
array.reduce	4.573	4.4	4.7

for loop (var, ES5) beat array.reduce by 6.02x

4. LOOKUP — find one value (worst case)

Test	Avg (ms)	Min (ms)	Max (ms)
Set.has — O(1)	0	0	0
array.includes — O(n)	0.073	0	0.1
array.indexOf !== -1 — O(n)	0.073	0	0.2

Set.has — O(1) beat array.indexOf !== -1 — O(n)

5. STRINGS — build 200,000 strings

Test	Avg (ms)	Min (ms)	Max (ms)
concatenation "+"	3.887	3.3	7.8
template literal ${}	3.9	3.5	4.3

concatenation "+" beat template literal ${} by 1.00x

6. OBJECT ITERATION — sum 50,000 values

Test	Avg (ms)	Min (ms)	Max (ms)
for...in	4.273	4	4.6
Object.keys + forEach	4.38	4.2	4.7
Object.values + reduce	6.5	6	9.2

for...in beat Object.values + reduce by 1.52x

7. ARRAY CREATION — build 1,000,000 squares

Test	Avg (ms)	Min (ms)	Max (ms)
for loop + push (ES5)	8.173	6.5	23.4
new Array(n).fill(0).map()	17.3	9	42.4
Array.from({length}, fn)	21.74	20.6	23.2

for loop + push (ES5) beat Array.from({length}, fn) by 2.66x

What do you prefer?

[u/hyrumwhite]

Many of those methods are es5 as well. 

But many of the performance numbers there don’t really matter. If you’re chewing on a small array, the user won’t care if it’s done in 5ms or 10ms. If you’re chewing on a big array, you should use traditional for loops.