Browser Rendering

The critical process of converting HTML, CSS, and JavaScript into interactive visual pixels via the DOM, CSSOM, and layout engines.

Browser rendering transforms raw code into a functional UI through a multi-step pipeline called the Critical Rendering Path. It starts with parsing HTML into the DOM and CSS into the CSSOM, merging them into a Render Tree to calculate exact geometry (Layout). The browser then executes Painting and Compositing to draw pixels on the screen, often targeting a 60fps refresh rate. Modern engines like Blink (Chrome) and Gecko (Firefox) optimize this by offloading heavy tasks to the GPU and using asynchronous decoding to prevent main-thread jank.

https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work