Coding Interview Questions | What Happens when a User Loads a Webpage

December 14th, 2023

Summary:

In preparing for an interview, a quick refresher on what steps the browser takes to load a webpage when a user types in an address in the URL bar at the top of the webpage.

  1. User Input:

    • The user types a URL into the browser’s address bar and hits Enter.

  2. Domain Name System (DNS) Resolution:

    • The browser needs to convert the human-readable domain (e.g., www.example.com) into an IP address that servers understand. It sends a DNS request to a DNS server, which returns the corresponding IP address.

  3. HTTP Request:

    • The browser forms an HTTP request based on the URL, including the method (GET by default), headers, and other relevant information.

  4. TCP Handshake:

    • A TCP (Transmission Control Protocol) connection is established between the client (browser) and the server. This involves a three-way handshake to ensure reliable communication.

  5. HTTP Request Sent:

    • The browser sends the HTTP request to the server. The request includes information like the requested resource (path), headers, and cookies.

  6. Server Processing:

    • The server receives the request and processes it. This involves looking up the requested resource, executing server-side logic (if any), and preparing the response.

  7. HTTP Response:

    • The server sends an HTTP response back to the client. This includes a status code, headers, and the requested content (HTML, CSS, JavaScript, images, etc.).

  8. Rendering the Page:

    • The browser receives the response and begins rendering the page. It parses the HTML, processes CSS, and executes JavaScript. This may involve multiple rendering cycles.

  9. Fetching External Resources:

    • As the browser processes the HTML and encounters external resources (like images, stylesheets, or scripts), it sends additional requests to fetch those resources.

  10. Rendering the Final Page:

    • Once all resources are received, the browser completes rendering the page, and the user sees the final result.

  11. Client-Side Execution:

    • If the page includes JavaScript, it may execute client-side logic. This can involve making additional requests (AJAX) or manipulating the DOM.

  12. User Interaction:

    • The user can interact with the page, triggering additional requests (e.g., form submissions or AJAX requests) and dynamic updates.