First, the bird’s eye view:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
It all starts with a DNS lookup.
Step 1. The DNS Lookup
Your Google Chrome software contacts a server on the Internet called a DNS server and asks it “Hey what’s the IP of organic-juice-for-dogs.io?”.
DNS has an official sounding acronym, and for good reason, because it’s a very authoritative and fundamental Internet service.
So what exactly is DNS useful for?
It transforms Domain names into IP addresses
1 2 3 4 5 6 7 8 9 10 11 12
A Domain name, also referred to as a “Dot com name”, is an easy-to-remember word or group of words, so people don’t have to memorize a list of meaningless numbers. You could think of it like dialing 1-800-FLOWERS, which is a lot easier to remember than 1-800-901-1111
The IP address
18.104.22.168 is just like a phone number. If you are a human being and want to call someone, you might dial
415-555-1212. But if you’re a thing on the internet and you want to talk to another thing on the internet, you instead dial the IP address
22.214.171.124 — same concept though.
So, that’s DNS in a nutshell. Not very complicated on the surface.
Step 2. Contact the IP address and fetch the HTML over HTTP
In this step, Google Chrome sends an
HTTP GET / HTTP request to the HTTP Server software running on a computer somewhere on the Internet that has the IP address
You can think of the
GET / as “Get me the top-most web page from the website”. This is known as the root of the website, in contrast to things deeper into the website, like
GET /juices/oakland, which might return a list of dog juice products local to Oakland, CA. Since the root is a the top, that means the tree is actually upside down, and folks tend to think of websites as being structured as inverted trees.
The back-and-forth is going to look something like this:
1 2 3 4 5 6 7 8 9 10 11 12
These things are speaking HTTP to each other. What is HTTP?
You can think of things that communicate with each other over the internet as using tubes. There are lots of different types of tubes, and in this case it’s an HTTP tube. As long as the software on both ends agree on the type of tube they’re using, everything just works and they can send stuff back and forth. HTTP is a really common type of tube, but it’s not the only one — for example the DNS lookup in the previous step used a completely different type of tube.
Usually the stuff sent back from the HTTP Server is something called HTML, which stands for HyperText Markup Language.
So at this point in our walk through, the Google Chrome web browser software has some HTML text, and it needs to render it in order for it to appear on your screen in a nice easy to view format. That’s the next step.
Step 3. Render HTML in a Web page
HTML is technically a markup language, which means that the text contains formatting directives which has an agreed upon standard on how it should be formatted. You can think of HTML as being similar to a Microsoft Word document, but MS Word is obfuscated while HTML is very transparent and simple:
For example, here is some HTML:
1 2 3 4 5 6 7
Which gets rendered into:
So, you’ll notice that the
<Header> element is in a larger font. And the
<Paragraph> has spaces in between it and the other text.
How does the Google Chrome Web Browser do the rendering? It’s just a piece of software, and rendering HTML is one of it’s primary responsibilities. There are tons of poor engineers at Google who do nothing all day but fix bugs in the Google Chrome rendering code.
Of course, there’s a lot more to it, but that’s the essence of rendering HTML into a web page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1 2 3 4 5 6 7 8
A JavasScript program can pop up a little “Alert Box”, like this:
And that’s the World Wide Web! You just went from typing a URL in your browser, from a shiny web page in your Google Chrome. Soup to nuts.
And you can finally buy some juice for your dog!
So that’s it for the high level stuff.
If you’re dying to know more, continue on to Deep Dive of What Happens Under The Hood When You Open A Web Page