Browser URL Example

What happens when you start typing google in your browser's search bar?

https://github.com/alex/what-happens-when

Simplified

Keyboard Actions

• Key Pressed: "g" key pressed; browser processes it and suggests URLs based on history.

• Enter Key: Physical keypress leads to electrical signals transmitted to the computer.

  • USB keyboard: Current flows to logic circuitry, keycode is generated and sent.

  • Virtual keyboard: Capacitive touch registers keypress, sends a software interrupt.

OS-Level Events

• Interrupts:

  • OS detects the keypress and triggers an interrupt request.

  • Windows: Sends a WM_KEYDOWN message.

  • macOS: Sends an NSEvent.

  • Linux: Xorg server listens for keycodes.

URL Parsing

• URL or Search Term: Determines if the input is a URL or search term.

• Non-ASCII Characters: Converts characters using Punycode if needed.

Network Communication

• DNS Lookup:

  • If the browser doesn't find the domain in its local cache, it sends a request to the DNS server (usually provided by the ISP or a local router).

  • If the DNS server doesn't have the answer, it will act as a recursive resolver, querying other DNS servers higher up in the hierarchy on behalf of the client.

• ARP Process: Determines the MAC address for the DNS server or default gateway.

• Socket Opening: Establishes a connection to the server using TCP.

• TLS Handshake: Encrypts communication using SSL/TLS for HTTPS.

HTTP Protocol

• Request: Sends an HTTP request to the server (e.g., GET request).

• Response: Server returns HTML, possibly with a status code (e.g., 200 OK).

• Resources: Browser fetches additional resources (images, CSS) as needed.

Browser Rendering

• HTML Parsing: Parses the HTML document into a DOM tree.

• CSS Parsing: Interprets CSS to apply styles.

• Rendering: Constructs a render tree, lays out elements, and paints them on the screen.

• GPU Rendering: Uses GPU for faster rendering in modern browsers.

Post-Rendering

• JavaScript Execution: Runs any JavaScript on the page.

• User Interaction: Scripts and network requests can be triggered by user input.