👨‍💻
Mike's Notes
  • Introduction
  • MacOs Setup
    • System Preferences
    • Homebrew
      • Usage
    • iTerm
      • VIM
      • Tree
      • ZSH
    • Visual Studio Code
    • Git
    • SSH Keys
  • Developer Productivity
    • How To Measure
  • DevOps Knowledge
    • SRE
      • Scaling Reliably
        • Splitting a Monolith into Microservices
      • Troubleshooting Common Issues
      • Service Level Terminology
      • Toil
      • Monitoring
      • Release Engineering
      • Best Practices
      • On-Call
      • Alerting
    • Containers
      • Docker
        • Best Practices
          • Image Building
          • Docker Development
        • CLI Cheat Sheet
      • Container Orchestration
        • Kubernetes
          • Benefits
          • Cheat Sheet
          • Components
          • Pods
          • Workload Resources
          • Best Practices
    • Developer Portal 👨‍💻
      • Solution Overview 🎯
      • System Architecture 🏗️
      • Implementation Journey 🛠️
      • Cross-team Collaboration 🤝
      • Lessons & Future 🎓
    • Provisioning
      • Terraform
        • Installation
        • Usage
    • Configuration Management
      • Ansible
        • Benefits
        • Installation
    • Build Systems
      • Bazel
        • Features
  • Security
    • Secure Software Engineering
    • Core Concepts
    • Security Design Principles
    • Software Security Requirements
    • Compliance Standards and Policies
      • Sarbanes-Oxley (SOX)
      • HIPAA and HITECH
      • Payment Card Industry Data Security Standard (PCI-DSS)
      • General Data Protection Regulation (GDPR)
      • California Consumer Privacy Act (CCPA)
      • Federal Risk and Authorization Management Program (FedRAMP)
    • Privacy & Data
  • Linux Fundamentals
    • Introduction to Linux
    • Architecture
    • Server Administration
      • User / Groups
      • File Permissions
      • SSH
      • Process Management
    • Networking
      • Diagrams
      • Browser URL Example
      • Network Topologies
      • Signal Routing
      • DNS (Domain Name System)
      • SSL (Secure Sockets Layer)
      • TLS (Transport Layer Security)
  • System Design
    • Process
    • Kafka
      • Advanced Topics
    • URL Shortener
Powered by GitBook
On this page

Was this helpful?

  1. Linux Fundamentals
  2. Networking

Browser URL Example

PreviousDiagramsNextNetwork Topologies

Last updated 7 months ago

Was this helpful?

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

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.

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