Miroslav Jonaš / @meeroslav / Weblica 2025 The dark art of code optimization JavaScript Bible 

No content

@meeroslav 

The deadline-driven development @meeroslav 

The performance @meeroslav 

@meeroslav Someone else will fix it 

Static rendering 

Lazy loading... @meeroslav 

Hydration @meeroslav 

Partial hydration @meeroslav 

Is it though? @meeroslav 

Miroslav Jonaš Lead DPE at @meeroslav 

TTI FCP TBT LCP LSD NBA @meeroslav 

Battle tested @meeroslav 

The Big O @meeroslav 

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 

MUTATIONS ARE BAD 

const myList = fetch( / * super large JSON * / ); addFullName(myList); / / < -- - implement this @meeroslav 

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 

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 

PERFORMANCE DETECTION Repetitio est mater studio… 

? 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 

350* times faster @meeroslav const network = {}; Object.keys(myList).forEach(username => { network[username] = {}; }); 

“No code is faster than any code ” - Me @meeroslav 

PERFORMANCE DETECTION ARRAYS vs OBJECTS @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 @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 }, ] } @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 

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 }, ] } 

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 ] ]; 

PERFORMANCE DETECTION Don't Lookup tables 

@meeroslav const myList = fetch( / * super large JSON * / ); getNickNameByRepo(repoUrl); // < - -- implement this 

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'; } 

MAPS VS HASHMAPS MAPS vs HASHMAPS 

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'; } 

Higher order functions @meeroslav 

tracks .filter(t => t.type === 'SAMPLER') .map(t => t.sequence) .reduce((acc, cur) = > [ . . . acc, . . . cur ], []); @meeroslav 

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 

@meeroslav a) Zone.js? b) vDOM? c) Signals? d) Reactivity? 

@meeroslav Mutate & persist e) 

PERFORMANCE DETECTION 

JSBENCH.ME @meeroslav 

console.time 4 the win @meeroslav 

The Butterfly Effect: How we gave the Linter a 900x boost @meeroslav 

know your loops embrace mutation choose structures wisely avoid HOF when performance matters use old school update measure what matters @meeroslav 

console.time @meeroslav 

JavaScript Bible The dark art of code optimization Miroslav Jonaš Thank you!