# 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**:&#x20;
  * 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.

<figure><img src="https://1588585907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MTwgToRvLjYdjfpAVgP%2Fuploads%2Fme7yxAdBW25IAoXwW2ad%2Fimage.png?alt=media&#x26;token=49e648d1-fa52-4a10-8714-0a2c7f7648c6" alt=""><figcaption></figcaption></figure>

* **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.