A budget as code: sizes, nodes, long tasks
File sizes are bytes of the text as sent, before compression. The long-task line works in Chromium. A browser without it prints a different last line, so check support before you rely on it.
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
daily.csv 13406 bytes
status.json 1303 bytes
trips-10k.csv 487313 bytes
first screen data (daily + status): 14709 bytes <= 400000 PASS
trips file: 487313 bytes <= 500000 PASS
10,000 SVG circles add 10000 nodes: FAIL
one canvas adds 1 node: PASS
a 150 ms loop was reported as a long task: true