How does a browser work?

The browser receives the requested URL, parses it, and sends an HTTP request to the server. The server processes the request and sends back a response containing HTML, CSS, JavaScript, images, and other resources.

The browser parses the HTML document, creating the DOM tree (Document Object Model).

Then it processes the CSS, building the CSSOM tree (CSS Object Model).

By combining the DOM and CSSOM, the browser creates the render tree, which contains the elements to be displayed along with their styles.

The layout phase (or reflow) occurs, during which the geometric parameters of each element (position, size) are calculated.

During the painting (or repainting) stage, the browser renders the visible elements on the screen, using information from the render tree and layout.

If JavaScript is present, the browser loads and executes it. JavaScript can modify the DOM and CSSOM, which may trigger re-layout and repaint stages.

The browser caches the received resources to speed up subsequent loads.