Describe the sequence of actions a browser (and not only a browser) performs after entering a URL and requesting a page. What is a forced layout?

After entering the URL and pressing Enter, the browser performs the following steps:

1. URL Parsing — identifies the protocol, domain, path, parameters.
2. DNS query — converts the domain name to an IP address.
3. Establishing a TCP connection (and TLS if HTTPS).
4. Sending an HTTP request to the server.
5. Receiving an HTTP response with status code, headers, and body.
6. HTML parsing — the browser constructs the DOM tree.
7. Resource loading — CSS, JS, images, fonts, etc.
8. CSS parsing — constructs the CSSOM (CSS Object Model).
9. Building the Render Tree — combining DOM and CSSOM.
10. Layout (Reflow) — calculating sizes and positions of elements.
11. Paint — rendering pixels on the screen.
12. Executing JavaScript — which may modify the DOM/CSSOM, causing re-layout and repaint.

Forced layout — a situation where the browser must immediately recalculate the layout, usually due to accessing properties that require current sizes (e.g., offsetWidth, clientHeight). This blocks the execution flow and reduces performance, as the browser must interrupt current operations to recalculate styles and layout.

To avoid forced layout, minimize reading properties that trigger reflow and group DOM and style changes.