What happens when a page loads?

1. The user enters a URL in the browser's address bar or clicks a link.
2. The browser performs a DNS lookup to find the IP address of the host.
3. The browser establishes a TCP connection with the web server using the obtained IP address.
4. The browser sends an HTTP request to the server, requesting the HTML document.
5. The server processes the request and sends an HTTP response with the HTML content and metadata (headers).
6. The browser receives the HTML document and begins parsing it, building the Document Object Model (DOM).
7. When it encounters links to CSS files, JavaScript files, and images in the HTML, the browser makes additional HTTP requests to load them.
8. The browser processes CSS, applying styles to DOM elements, creating the CSS Object Model (CSSOM).
9. After building the DOM and CSSOM, the browser combines them to create the Render Tree.
10. The browser performs layout calculations (Layout/Reflow) to determine the geometric characteristics of elements.
11. The browser paints the elements on the screen based on the Render Tree and layout information.
12. The browser executes JavaScript code, which may modify the DOM, CSSOM, or initiate additional HTTP requests (e.g., AJAX). Changes may trigger a re-execution of steps 6-11.

// Example of a simple HTTP server in Node.js
const http = require('http');

const server = http.createServer((req, res) => {
  // Handling incoming request
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('<h1>Hello, world!</h1>'); // Sending HTML response
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

Stage	Description
DNS Lookup	Converting domain name to IP address
TCP Connection	Establishing a connection between client and server
HTTP Request	Request from client to server
HTTP Response	Response from server to client
Parsing & DOM	Building the DOM tree from HTML
CSSOM	Building the CSSOM tree from CSS
Render Tree	Combining DOM and CSSOM
Layout/Reflow	Calculating positions and sizes of elements
Paint	Rendering elements on the screen
JavaScript Exec	Executing scripts