Browsers: The Engines

How Chrome/Safari Actually Turn Code into Pixels

Browsers are incredibly sophisticated software. Understanding their internals separates good developers from great ones.

Rendering Engines

Blink (Chrome, Edge, Opera) and WebKit (Safari) are the two dominant rendering engines. They parse HTML into a DOM tree, CSS into a CSSOM tree, and combine them into a Render Tree.

The Critical Rendering Path

This is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into actual pixels:

1. Parse HTML → DOM Tree
2. Parse CSS → CSSOM Tree
3. Combine → Render Tree
4. Layout → Calculate geometry (position, size)
5. Paint → Fill in pixels
6. Composite → Layer management and GPU acceleration

Reflow & Repaint

Reflow (Layout recalculation) is expensive — it happens when you change element dimensions. Repaint is cheaper — it happens when you change visual properties like color.