JavaScript · Event Loop · Mid-Level · Concept
How does browser rendering relate to the event loop?
Short Interview Answer
Browsers typically aim to render between tasks; long tasks and microtask floods delay paint, input, and style/layout work.
Detailed Explanation
A frame budget (~16ms at 60Hz) must cover JS, style, layout, paint, and composite. The event loop may yield for rendering after a task if it's time to paint (implementation details vary). `requestAnimationFrame` callbacks run before the next paint. Endless microtasks defer rendering. Long synchronous JS is a long task that blocks input. Performance tools (Long Tasks API, Performance panel) help find blockers. Scheduling work with `scheduler.postTask`, idle callbacks, or chunking helps keep interaction responsive.
Interview Tip
Mention rAF vs setTimeout for animation-related work.
Common Mistake
Assuming the browser paints after every microtask.