API ArcadeISSUE #21 of 23

performance · profiling · devtools

ApiaVSLegacy Larry

Apia saysProfile performance with DevTools — find slow functions, layout thrash, and long tasks.

The browser's Performance panel records a timeline of scripting, rendering, and painting so you can spot bottlenecks: long tasks blocking the main thread, layout thrashing (interleaved DOM reads/writes), and excessive re-renders. Measure before optimizing — guesses are usually wrong. performance.now() times code precisely.

Power-ups you unlock

DevTools Performance panel records a timeline
Spot long tasks, layout thrash, repaints
Measure before optimizing (don’t guess)
performance.now() for precise timing

Legacy Larry attacks — common mistakes

Optimizing without measuring first
Interleaving DOM reads and writes (forced reflow)
Premature micro-optimizations over real bottlenecks

Boss battleTime a loop with performance.now() and reason about what DevTools would show.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const t0=performance.now();let s=0;for(let i=0;i<1e6;i++)s+=i;const t1=performance.now();
document.getElementById('o').textContent='loop took '+(t1-t0).toFixed(1)+'ms';</script></body></html>

▶ Open the interactive comic issue

‹ Testing · Jest · Vitest · Playwright Memory · The V8 Heap · Gc Cycles ›