How does web page loading occur?

The user enters a URL in the browser's address bar or clicks on a link.
Parsing the URL: The browser parses the URL to determine the protocol, domain, port, and path.
Finding the IP address: The browser checks the DNS cache, then the operating system cache, then the router cache. If the address is not found locally, a request is sent to the DNS server to obtain the IP address of the domain name.
Establishing a TCP connection (Handshake): The browser establishes a TCP connection with the server using the obtained IP address (three-way handshake: SYN -> SYN-ACK -> ACK).
Sending an HTTP request: The browser sends an HTTP request (usually GET) to the server specifying the required resource (path), headers (User-Agent, Accept-Encoding, Cookie, etc.), and the request body (if any).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Server processes the request: The server receives the request, processes it (e.g., executes server-side scripts), and forms an HTTP response.
Sending the HTTP response: The server sends the HTTP response back to the browser. The response includes a status code (e.g., 200 OK), headers (Content-Type, Content-Length, Cache-Control, etc.), and the response body (the content of the requested resource, e.g., an HTML file).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
Parsing HTML and building the DOM: The browser starts receiving the HTML code and parsing it, creating a Document Object Model (DOM) in memory. The DOM represents a tree of HTML elements.
Loading and processing resources: During HTML parsing, the browser encounters links to other resources (CSS, JavaScript, images, fonts, etc.). For each resource, steps 3-7 are performed (IP lookup, TCP connection if needed, HTTP request/response). Loading these resources can happen in parallel (limited by the number of concurrent connections).
Building CSSOM: The browser parses CSS files and <style> blocks in HTML, creating a CSS Object Model (CSSOM). CSSOM represents the styles applicable to page elements.
Building the Render Tree: The browser combines the DOM and CSSOM to build the Render Tree. The Render Tree contains only visible elements and their styles. Elements with display: none are not included.
Layout (Reflow): The browser calculates the exact position and size of each element based on the Render Tree, viewport size, and styles.
Painting (Repaint): The browser draws each element on the screen at the calculated positions with applied styles. This occurs on layers.
Composite: The browser combines the painted layers into the final image displayed on the user's screen.
Executing JavaScript: As scripts are loaded and parsed, JavaScript code is executed. JavaScript execution can affect the DOM and CSSOM, causing re-layout and repaint steps to repeat.

Key stages of content rendering:

DOMContentLoaded: The event fires when the browser has fully loaded and parsed the HTML document and built the DOM tree, but waits for stylesheets, images, and subframes to load.
Load: The event fires when the entire page, including images, scripts, styles, and other resources, has fully loaded.