Batch DOM work: one insert, reads before writes
After append, the fragment is empty: its children moved into the list. Doubling all boxes needed one forced layout for the reads and one at the end, instead of one per box.
Fast JavaScript comes from doing less work, not from clever tricks: measure first with performance.now, marks and the DevTools Performance panel, then remove repeated work with memoisation, better data structures and batched DOM updates.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write memoize(fn) that supports any number of arguments by building a key with JSON.stringify(args). Show that a counting function runs once for repeated calls.
You have orders (10,000 items with customerId) and vipIds (an array of 2,000 ids). Write the fast way to get the orders from VIP customers.
Explain it without notes
How would you find out why a page feels slow when typing in a search box?
What is memoisation, when is it safe, and what does it cost?
What is layout thrashing and how do you avoid it?
Why is performance.now() better than Date.now() for measuring code?
Preview
Console
Nothing logged yet.Expected console output
1000 Item 1000 0
[ 20, 30, 40 ] [ 40, 60, 80 ]