The dark art of code optimization

The performance topic is very trendy right now. Chances are you already heard it—use lazy loading, prefetch everything with partially hydrated server-side rendered static islands, and ship zero bytes of JavaScript! But what if your code is not running in the browser, or your performance is bad at runtime?

This talk will share several (un)conventional tricks you can apply to speed up the application when the size of your data grows. I will show you how to measure performance and squeeze out those last excessive milliseconds.

Learn how usual "bad practices" can become your ally when battling performance.

Transcript

1. Miroslav Jonaš / @meeroslav / Weblica 2025 The dark art of code optimization JavaScript Bible
3. @meeroslav
4. The deadline-driven development @meeroslav
5. The performance @meeroslav
6. @meeroslav Someone else will fix it
7. Static rendering
8. Lazy loading... @meeroslav
9. Hydration @meeroslav
10. Partial hydration @meeroslav
11. Is it though? @meeroslav
12. Miroslav Jonaš Lead DPE at @meeroslav
13. TTI FCP TBT LCP LSD NBA @meeroslav
14. Battle tested @meeroslav
15. The Big O @meeroslav
16. Know your loops const nodes = []; for (let i = 0; i < nodes.length; i ++ ) { const v = nodes[i]; v.children.forEach((c) => { for (key in c) { collection[key] = { . .. myInit }; } }); } 1 2 3 4 @meeroslav
17. MUTATIONS ARE BAD
18. const myList = fetch( / * super large JSON * / ); addFullName(myList); / / < -- - implement this @meeroslav
19. const myList = fetch( / * super large JSON * / ); addFullName(myList); / / < -- - implement this // immutable version function addFullName(myList) { const result = {}; Object.keys(myList).forEach(username = > { const user = myList[username]; result[username] = { . . . user, address: [ . . . user.address], fullName: user.firstName + ' ' + user.lastName, }; }); return result; } @meeroslav
20. const myList = fetch( /* super large JSON */ ); addFullName(myList); / / < -- - implement this // mutable version function addFullName(myList) { Object.entries(myList).forEach(user => { user.fullName = user.firstName + ' ' + user.lastName; }); } 27* times faster @meeroslav
21. PERFORMANCE DETECTION Repetitio est mater studio…
22. ? const myList = fetch( /* super large JSON */ ); const initConnection = Object.keys(myList).reduce((acc, username) = > { return { . . . acc, [username]: false }; }, {}); const network = {}; Object.keys(myList).forEach(username => { network[username] = { .. . initConnection }; }); @meeroslav
23. 350* times faster @meeroslav const network = {}; Object.keys(myList).forEach(username => { network[username] = {}; });
24. “No code is faster than any code ” - Me @meeroslav
25. PERFORMANCE DETECTION ARRAYS vs OBJECTS @meeroslav
26. export type SamplerTrack = { id: string; volume: number; reverb: number; solo: boolean; mute: boolean; gain: GainNode; type: 'SAMPLER'; sample: 'string'; envelope: { attack: number; decay: number; sustain: number; release: number; }; sequence: SynthNote[]; }; type SynthNote = { note: number | undefined | '-'; frequency ? : number; }; / / track.sequence[0].note / / track.envelope.sustain @meeroslav
27. const track: SamplerTrack = { id: 'abcdef', volume: 0.8, reverb: 0.2, solo: false, mute: false, gain: context.createGain(), type: 'SAMPLER', sample: 'kick', envelope: { attack: 0.1, decay: 0.2, sustain: 0.5, release: 0.3 }, sequence: [ { note: 6 }, { note: 4 }, { note: 8 }, { note: undefined }, { note: 2 }, { note: '-' }, { note: '-' }, { note: undefined }, { note: 6 }, { note: 4 }, { note: 8 }, { note: undefined }, { note: 2 }, { note: '-' }, { note: '-' }, { note: undefined }, ] } @meeroslav export type SamplerTrack = { id: string; volume: number; reverb: number; solo: boolean; mute: boolean; gain: GainNode; type: 'SAMPLER'; sample: 'string'; envelope: { attack: number; decay: number; sustain: number; release: number; }; sequence: SynthNote[]; }; type SynthNote = { note: number | undefined | '-'; frequency ? : number; }; / / track.sequence[0].note / / track.envelope.sustain
28. const track = [ 'abcdef', 0.8, 0.2, false, false, context.createGain(), 1, 'kick', [ 0.1, 0.2, 0.5, 0.3 ], [ 6, 4, 8, undefined, 2, '-', '-', undefined, 6, 4, 8, undefined, 2, '-', '-', undefined ] ]; @meeroslav const track: SamplerTrack = { id: 'abcdef', volume: 0.8, reverb: 0.2, solo: false, mute: false, gain: context.createGain(), type: 'SAMPLER', sample: 'kick', envelope: { attack: 0.1, decay: 0.2, sustain: 0.5, release: 0.3 }, sequence: [ { note: 6 }, { note: 4 }, { note: 8 }, { note: undefined }, { note: 2 }, { note: '-' }, { note: '-' }, { note: undefined }, { note: 6 }, { note: 4 }, { note: 8 }, { note: undefined }, { note: 2 }, { note: '-' }, { note: '-' }, { note: undefined }, ] }
29. const TRACK_ID = 0; const TRACK_VOLUME = 1; const TRACK_REVERB = 2; const TRACK_SOLO = 3; const TRACK_MUTE = 4; const TRACK_GAIN = 5; const TRACK_TYPE = 6; const TRACK_SAMPLE = 7; const TRACK_ENVELOPE = 8; const TRACK_SEQUENCE = 9; const ATTACK = 0; const DECAY = 1; const SUSTAIN = 2; const RELEASE = 3; / / track.sequence[5] track[TRACK_SEQUENCE][5] / / track.envelope.sustain track[TRACK_ENVELOPE][SUSTAIN] 18%* faster @meeroslav const track = [ 'abcdef', 0.8, 0.2, false, false, context.createGain(), 1, 'kick', [ 0.1, 0.2, 0.5, 0.3 ], [ 6, 4, 8, undefined, 2, '-', '-', undefined, 6, 4, 8, undefined, 2, '-', '-', undefined ] ];
30. PERFORMANCE DETECTION Don't Lookup tables
31. @meeroslav const myList = fetch( / * super large JSON * / ); getNickNameByRepo(repoUrl); // < - -- implement this
32. 13000* times faster @meeroslav const myList = fetch( / * super large JSON * / ); const usernameLookup = {}; Object.entries(myList).forEach(([username, data]) => { data.repos.forEach((repo) => { usernameLookup[repo.url] = username; }); }); function getNickNameByRepo(repoUrl) { return usernameLookup[repoUrl] || 'Unknown'; }
33. MAPS VS HASHMAPS MAPS vs HASHMAPS
34. 17* times faster @meeroslav const myList = fetch( / * super large JSON * / ); const usernameLookup = new Map(); Object.entries(myList).forEach(([username, data]) => { data.repos.forEach((repo) => { usernameLookup.set(repo.url, username); }); }); function getNickNameByRepo(repoUrl) { return usernameLookup.get(repoUrl]) || 'Unknown'; }
35. Higher order functions @meeroslav
36. tracks .filter(t => t.type === 'SAMPLER') .map(t => t.sequence) .reduce((acc, cur) = > [ . . . acc, . . . cur ], []); @meeroslav
37. 200* times faster tracks .filter(t => t.type === 'SAMPLER') .map(t => t.sequence) .reduce((acc, cur) = > [ . . . acc, . . . cur ], []); const seq = []; tracks.forEach(t = > { if (t.type === 'SAMPLER') { t.sequence.forEach(s => { seq.push(s) }) } }) @meeroslav
38. @meeroslav a) Zone.js? b) vDOM? c) Signals? d) Reactivity?
39. @meeroslav Mutate & persist e)
40. PERFORMANCE DETECTION
41. JSBENCH.ME @meeroslav
42. console.time 4 the win @meeroslav
43. The Butterfly Effect: How we gave the Linter a 900x boost @meeroslav
44. know your loops embrace mutation choose structures wisely avoid HOF when performance matters use old school update measure what matters @meeroslav
45. console.time @meeroslav
46. JavaScript Bible The dark art of code optimization Miroslav Jonaš Thank you!