Redraw 50 times: what is left behind?
Counts, not times: they come out the same on every machine, and a test can fail on them. The listener count here covers only 'resize' on window.
A dashboard that runs all day fails slowly: a few listeners, timers and nodes left behind by every redraw. Agree numbers in advance (bytes, long tasks, nodes, listeners), measure them with DevTools and with counters, and ship only the code you use.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write countNodes(root) that returns the number of elements inside root, and use it to assert that 50 redraws leave the same count as 1. Which method do you use to count?
A chart adds document.addEventListener("keydown", …) in drawChart. Rewrite it so a stop() removes it, using an AbortController.
Explain it without notes
Why is a count of listeners and nodes a better test than a time?
Why does removeEventListener with a new arrow function not remove the listener?
What is a long task and why does it matter on a live dashboard?
How do you decide what a performance budget should be?
Preview
Console
Nothing logged yet.Expected console output
leaky resize listeners: 50 | timers: 50 | charts: 50 | rects: 250
fixed resize listeners: 1 | timers: 1 | charts: 1 | rects: 5