What Happens When You Type a URL in a Browser and Press Enter?
There is just so much to unpack if you really get into the details. Others online have already done a great job answering this question with minute details I wouldn't have even thought to include in this post had I not discovered their work (see the explanation of keystrokes being entered on a USB keyboard and the related circuitry vs a capacitive touchscreen) so I'm not going to try to out-detail a 70+ person collaborative effort.
Instead here are some of the things I like to highlight when answering this question along with parts I've had to educate myself on (browser rendering steps, parsing JS and CSS, various trees, and that end of the flow were really interesting to read about as I don't usually have exposure to them).
Credit: @manekinekko |
This graphic does a fantastic job detailing the flow of information that occurs when someone enters a URL in a browser and presses enter. For more information click on each of the steps below:
- URL is entered.
- DNS lookup occurs.
- Once IP address is determined a TCP connection is made (usually over port 443 or 80) via the TCP/IP 3-way handshake.
- HTTP request is made for the website.
- Web server responds with their HTML website plus any other code used on their site (CSS, JS, anything but Adobe Flash, etc).
- The browser renders the webpage -- parsing, DOM, CSSOM, and more.
- How does the browser/computer know how to get to a DNS server? How does this differ between a computer that's been on the network for a year vs a brand new computer on the network?
- Local DHCP, DNS, HOSTS file. How does the computer have an identity on the local network let alone the Internet?
- Network Address Translation's (NAT) role in sending and receiving traffic from the web server.
- Address Resolution Protocol's (ARP) role in forming frames and packets to get out of the local network.
- Web proxies, stateful and stateless firewalls, TLS/SSL, and public-key cryptography.
- Browser/session cookies, geolocation detections, and compliance requirements such as GDPR.
References & Extras
- https://github.com/alex/what-happens-when#
- https://twitter.com/kamranahmedse/status/1297131414190776320
Comments
Post a Comment