Advanced level · Module 5: Performance, Security and Accessibility in JavaScript · Lesson 2 of 4
Responsive Interactions
Keep interfaces responsive by debouncing input, avoiding layout thrashing and splitting long tasks.
In this lesson you will
- Debounce frequent events
- Avoid forced layouts and long tasks
Key concepts
debounce and throttlelayout thrashingrequestAnimationFramebreaking up long tasks
The lesson
Events such as input and scroll can fire many times per second. Debouncing waits until the user pauses before doing expensive work, such as filtering a long list; throttling limits work to once per interval.
Reading layout values (offsetHeight) right after changing styles forces the browser to recalculate layout. Doing this in a loop — layout thrashing — makes pages stutter. Batch all reads, then all writes.
Work longer than about 50 ms blocks taps and typing. Split large jobs into chunks and yield to the browser between them, for example with setTimeout or requestAnimationFrame.
Step by step
- Debounce a search box that filters 2,000 visits.
- Find a layout-thrashing loop in the profiler and fix it.
- Split a long rendering job into chunks.
- Measure typing responsiveness before and after.
Practice activity
Make the visit search instant on a throttled CPU using debouncing and chunked rendering.
Expected result: Typing stays responsive under 4× CPU throttling and the profile shows no long tasks during search.
Check your understanding
-
What does debouncing do?
Show answer
Delays work until events stop firing for a set time.
-
What is layout thrashing?
Show answer
Repeatedly forcing layout by interleaving style writes and layout reads.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.