Common performance traps and measuring first

Understanding Common performance traps and measuring first

Every interaction has a budget: roughly 16 ms of work per frame for smooth animation, and a few hundred milliseconds before a click feels laggy. When something blows that budget, the time sits in a small number of buckets — waiting on the network, your JavaScript, and the browser's own style, layout and paint work — and reading the source tells you what happens, not how many times it happens. That is why guessing is unreliable: the change you feel confident about is usually a constant factor, while the real cost is one line that quietly runs a million times. Get a number first, from performance.now() around the suspect path or from a profiler recording, and only then decide what to edit.

The traps that matter share one shape: work per item that touches every other item, so the total grows with n² while the code still reads as a single loop. `list.filter(x => other.includes(x.id))` scans `other` once per element; `items.reduce((acc, x) => [...acc, x], [])` copies the whole accumulator on every step; `queue.shift()` in a while loop shifts the remaining elements each time; `container.innerHTML += row` re-serialises and re-parses everything already there; reading `el.offsetHeight` right after a style write forces the browser to redo layout before it can answer. Ten rows hides all of that, ten thousand freezes the tab. By contrast, `for` versus `forEach`, or caching `.length`, are constant factors the JIT has already flattened, which is why those rewrites so rarely move the number.

A measurement is only useful when it is above the noise. Run the candidate enough times that the elapsed time is comfortably larger than the clock's resolution, discard the first run because it pays for parsing and optimisation, and report the best or the median rather than the mean, which gets dragged around by GC pauses and other processes. Use the returned value for something so the engine cannot treat the work as dead, change one variable at a time, and re-run the identical harness after the fix. If the number did not move, the change was not an optimisation — put the simpler code back.

function bestOf(fn, runs = 3) {
  fn(); // warm-up: the first call also pays for parsing and optimising
  let ms = Infinity;
  let value;
  for (let i = 0; i < runs; i++) {
    const start = performance.now();
    value = fn(); // keep the result so the work cannot be skipped
    ms = Math.min(ms, performance.now() - start);
  }
  return { ms, value };
}

const nums = Array.from({ length: 10000 }, (_, i) => i);

const spread = bestOf(() => nums.reduce((acc, n) => [...acc, n * 2], []));
const loop = bestOf(() => {
  const out = [];
  for (const n of nums) out.push(n * 2);
  return out;
});

console.log('same result:', spread.value.length === loop.value.length && spread.value.at(-1) === loop.value.at(-1));
console.log('loop at least 20x faster:', spread.ms > loop.ms * 20);
console.log('elements copied by the spread version:', (nums.length * (nums.length - 1)) / 2);

Worked examples

function intersectScan(xs, ys) {
  let comparisons = 0;
  const out = [];
  for (const x of xs) {
    for (const y of ys) {
      comparisons++;
      if (x === y) { out.push(x); break; }
    }
  }
  return { out, comparisons };
}

function intersectSet(xs, ys) {
  const seen = new Set(ys);
  let lookups = 0;
  const out = [];
  for (const x of xs) {
    lookups++;
    if (seen.has(x)) out.push(x);
  }
  return { out, lookups };
}

const xs = Array.from({ length: 5000 }, (_, i) => i);
const ys = Array.from({ length: 5000 }, (_, i) => i + 2500);

const scanned = intersectScan(xs, ys);
const hashed = intersectSet(xs, ys);

console.log('matches:', scanned.out.length, hashed.out.length);
console.log('scan comparisons:', scanned.comparisons);
console.log('set lookups:', hashed.lookups);

performance.mark('build:start');
const rows = [];
for (let i = 0; i < 5000; i++) rows.push({ id: i, label: 'row ' + i });
performance.mark('build:end');
performance.measure('build rows', 'build:start', 'build:end');

const entry = performance.getEntriesByName('build rows', 'measure')[0];
console.log(entry.entryType, '/', entry.name);
console.log('rows built:', rows.length);
console.log('duration is a millisecond number:', typeof entry.duration === 'number' && entry.duration >= 0);

const layout = {
  dirty: false,
  recalcs: 0,
  writeStyle() { this.dirty = true; },
  readHeight() {
    if (this.dirty) { this.recalcs++; this.dirty = false; }
    return 20;
  }
};

const items = Array.from({ length: 50 }, (_, i) => i);

items.forEach(() => {
  layout.writeStyle();
  layout.readHeight();
});
console.log('interleaved layout passes:', layout.recalcs);

layout.recalcs = 0;
layout.dirty = false;

const heights = items.map(() => layout.readHeight());
items.forEach(() => layout.writeStyle());
layout.readHeight(); // the pass the browser does before the next paint
console.log('batched layout passes:', layout.recalcs);
console.log('heights measured:', heights.length);

Important notes

Common mistakes

Try it yourself