Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics

This comprehensive article provides an in-depth exploration of the browser's event loop mechanism and its relationship with rendering and page performance.

1. Browser Architecture

Modern browsers use multi-process architecture where each tab runs in its own process. The main thread (rendering process) is responsible for parsing HTML, computing CSS styles, executing JavaScript, calculating layout, and painting layers. The main thread can only run one task at a time, and each task must complete before moving to the next.

2. Event Loop Process

One event loop cycle includes: execute one macro task from task queue → execute and clear all micro tasks → requestAnimationFrame → browser updates rendering → requestIdleCallback. The rendering doesn't necessarily occur at the end of every event loop; it depends on whether the rendering opportunities exist.

3. Key APIs and Execution Timing

The article explains the execution timing differences between setTimeout, requestAnimationFrame (RAF), and requestIdleCallback (RIC). RAF executes at the end of the current frame before the next frame starts, making it ideal for animations. setTimeout's delay is not stable and can be affected by nested timeout levels (minimum 4ms delay after 5+ nested levels). RIC executes when the browser's main thread is idle, with computeDeadline calculated based on multiple factors including pending renders and timeout parameters.

4. Long Tasks and Performance Impact

Long tasks are defined as tasks exceeding 50ms. They block the main thread, causing frame drops and page stuttering. JS execution and painting both occur on the main thread; long tasks delay the submission of painted data to the composition thread, resulting in frames without rendering.

5. React Time Slicing Implementation

React doesn't use RIC due to poor browser compatibility (e.g., Safari). Instead, it uses MessageChannel which has higher priority than setTimeout and can execute immediately after the previous frame renders, achieving interruptible JS execution.

6. Interaction Performance Metrics

TTI (Time to Interactive): Measures when a page becomes interactive by finding a 5-second window with no long tasks after FCP. FID (First Input Delay): Measures delay from user interaction to browser processing. INP (Interaction to Next Paint): Measures time from user interaction to visual update; it will replace FID as the standard metric in March 2024.

7. Optimization Methods

1) Split long tasks using techniques like yielding to main thread with Promise + setTimeout. 2) Lazy load non-critical modules using dynamic import. 3) Lazy load off-screen content using loading="lazy" for images, IntersectionObserver, and content-visibility CSS property. 4) Use flexible caching strategies with Service Worker for cross-origin resource prefetching.