64
66
What happens behind the scenes when we type www.cnn.com in a browser and how does information gets displayed on the screen?
A technical explanation would be highly appreciated.
64
66
What happens behind the scenes when we type www.cnn.com in a browser and how does information gets displayed on the screen?
A technical explanation would be highly appreciated.
134
Browser: "Ok, so, I have a user requesting this address: www.cnn.com. I figure since there are no slashes or anything, this is a direct request of a main page. There was also no protocol or port defined, so I'll assume it's HTTP and going to port 80... oh well, first things first. Hey DNS, pal, wake up! Where is this www.cnn.com hiding at?"
DNS: "Right... wait a sec, I'll ask the ISP servers. Ok, it looks like 157.166.226.25."
Browser: "Ok. Internet Protocol Suite, your turn! Call 157.166.226.25, please. Send them this HTTP header. It's asking for the basic structure and content of their main page so I know what else to fetch... oh well, not that you'd care about this I guess. "
TCP/IP: "What do you mean my turn? Like I wasn't just working my back off right there for the DNS? God, what does it take to get a bit of appreciation here..."
Browser: ...
TCP/IP: "Yeah, yeah... Connecting... I'll just ask the gateway to forward it. You know, it isn't all that easy, I'll have to divide your pretty request there into multiple parts so it reaches the end, and assemble any stuff they send back from all the thousands of packages I get... ah, right, you don't care. Figures."
Meanwhile, at the CNN headquarters, a message finally ends up at the door of the Web Server.
CNN Web Server: "Nzhôô! A customer! He wants news! The Front Page! How about it?"
CNN Server Side Script Engine: "Right, will do! Front page, right?"
CNN Database Server: "Yey! Work for me! What content do you need?"
CNN Server Side Script Engine: "... um, sorry DB, I have a copy of front page right here in my cache, no need to compile anything. But hey, take this user ID and store it, I'll send it to the customer too, so we know who we're talking to later on."
CNN Database Server: "Yey!"
Back at the user's computer...
TCP/IP: "Ooookay, here comes the reply. Oh boy, why do I have a feeling this'll be a big one..."
Browser: "Uh, wow... this has all sorts of javascript code... bunch of images, couple of forms... Right, this'll take a while to render. Better get to it. Hey, IP system, there's a bunch more stuff you'll need to get. Let's see I need a few stylesheets from i.cdn.turner.com - via HTTP and ask for the file /cnn/.element/css/2.0/common.css. And then get some of those scripts at i.cdn.turner.com too, I'm counting six so far..."
TCP/IP: "I get the picture. Just give me the server addresses and all that. And wrap that file stuff within the HTTP request, I don't want to deal with it."
DNS: "Checking the i.cdn.turner.com... hey, bit of trivia, it's actually called cdn.cnn.com.c.footprint.net. IP is 4.23.41.126"
Browser: "Sure, sure... wait a sec, this'll take a few nsec to process, I'm trying to understand all this script..."
TCP/IP: "Hey, here's the CSS you asked for. Oh, and... yeah, those additional scripts also just came back."
Browser: "Whew, there's more... some sort of video ad!"
TCP/IP: "Oh boy, what fun that sounds like..."
Browser: "There's all sorts of images too! And this CSS looks a bit nasty... right, so if that part goes there, and has this line at the top... how on earth would that fit anymore... no, I'll have to stretch this a bit to make it... Oh, but that other CSS file overrides that rule... Well, this one ain't going to be an easy piece to render, that's for sure!"
TCP/IP: "Ok, ok, stop distracting me for a sec, there's a lot to do here still."
Browser: "User, here's a small progress report for you. Sorry, this all might take a few secs, there's like 140 different elements to load, and going at 16 so far."
One or two seconds later...
TCP/IP: "Ok, that should be all. Hey, listen... sorry I snapped at you earlier, you managing there? This sure seems like quite the load for you too."
Browser: "Phew, yeah, it's all these websites nowdays, they sure don't make it easy for you. Well, I'll manage. It's what I'm here for."
TCP/IP: "I guess it's quite heavy for all of us these days... oh, stop gloating there DNS!"
Browser: "Hey user! The website's ready - go get your news!"
Wow. Even in 2016, this answer still rules! Thanks! – Akhoy – 2016-06-12T14:56:04.387
If answer author ever considers a few minor edits: a great addition would be the inclusion of some resources from completely separate sites. The CDN part is good, but for a novice, it might not fully illustrate how a single page can seamlessly integrate resources from virtually any other web server on the internet, not just "related" servers. Also, client-side caching is of interest, too. – Justin – 2017-09-05T18:35:35.343
17So this is what my PC does after dark. – Phoshi – 2009-08-28T22:19:32.467
7Great Explanation...Hat's Off to you...Bingo... – Rachel – 2009-08-29T00:57:34.990
@llari, that's the best explanation for the non-tech around. Well done. – mrdenny – 2009-08-29T02:47:10.390
Nice ! Hope to see some more from you ! – Preets – 2009-08-29T04:52:58.250
7Wondeful piece of storytelling :) – Michael Borgwardt – 2009-08-29T07:56:14.760
Many thanks for the compliments! Had fun writing it. :) Hope I got the tech correct enough too. – Ilari Kajaste – 2009-08-29T10:11:44.440
But... what happened next? Did Web Browser and Tcp Ip lived happily ever after? – Loïc Wolff – 2009-09-09T07:23:46.367
5@dex: ... and to this day they're still going strong, sorting out all of the user's whimsical requests with a diligence worthy of praise in the books of history. But, like all things, one day it will be their time to retire into obsolescence, gracefully making way to more modern approaches suited for more modern times. But be assured they'll always be there, in our legacy, watching with a knowing smile and passing to future generations all the hard lessons they learned during these vibrant times of emerging internet communications. – Ilari Kajaste – 2009-09-09T12:35:35.400
love this solutoin...the way of story telling..... – Arya – 2012-06-20T23:18:41.130
This isn't a very accurate or informative answer, at all. It was entertaining though. – wahnfrieden – 2009-10-25T09:40:05.837
Am I the only one wondering what's "Nzhôô"? – That Brazilian Guy – 2013-03-26T15:57:10.823
@ruda.almeida :) "Nzhôô" is the closest equivalent I could find with a quick search as an Apache term for an exclamation of elation. It apparently translates to "good". (Not sure, unfortunately, whether any of the Apache languages actually use the word in that context, though I would think it likely.) – Ilari Kajaste – 2013-03-28T08:08:36.200
3Hooray for the naysayers, right, @wahnfrieden? I consider it pretty accurate, and informative. – Jürgen A. Erhard – 2010-01-13T02:17:13.083
20
How the web works: HTTP and CGI explained
Also a great explanation from CERN - alma mater of Web: How the web works
18
This is good, but it might be worth mentioning caching (on the browser and elsewhere), proxies, load balancing, CDNs, and so on. I think these are all a crucial part of understanding how (on earth) busy sites handle millions of nearly simultaneous requests for vast amounts of content. – Sam Dutton – 2010-12-07T16:29:30.220
12
The first step is the DNS (Domain Name Server) lookup. It uses the DNS servers specified in your network settings (or given to you by DHCP) to lookup the top domain (cnn.com) and then ask that domain's nameserver for the IP address of the subdomain specified (www.cnn.com).
After it has the IP address, your browser begin communications with the web server. This is done using the specified protocol (which usually defaults to HTTP 1.1). A 'GET' request for '/' is made to the server, which responds with the HTML document contents and the appropriate headers (which tell the browser of the document's content-type, HTML, and other information). Then the browser parses the document and finds any URLs which it needs to embed in the page (like images or linked stylesheets) and does GET requests on each of those.
The browser also usually automatically makes a GET request for '/favicon.ico' (to display the little CNN icon next to the site title).
Your browser will also likely specify in its request headers that it wants the response content to be compressed, using the gzip algorithm. This makes the file download much smaller, if the server supports it. This is all transparent to you, even though it's like downloading a ZIP file and unzipping it.
When you reload the page, your browser checks if that page is already cached in your system, and if so, it does an HTTP request just for the header of the document, and checks its modified date. If this date is later than its cached copy, it requests the full document contents again and refreshes the page. Otherwise it just uses your local copy.
The guy doesn't know the basics and you just blew him with DNS, DHCP and IP. Let's explain the IP packet structure to him! – None – 2009-08-28T16:40:20.133
6He asked for technical details. He can look up IP if he wants. – None – 2009-08-28T16:40:55.170
The thing is he probably does not want to look up anything... :( – None – 2009-08-28T16:43:29.957
8
Missing so far from the other answers is what happens on the CNN side:
6
This obviously isn't a technical explanation, but it's a cute visual aid (from the excellent Vladstudio.com) that may be helpful to some:
1
The info you just asked could fill a couple dozen books. But here is my attempt to explain it: Your browser tells your OS to find the IP address of cnn.com. Then your OS asks a DNS server for the IP address for cnn.com. The IP is sent to the broswer which contacts the IP address and requests the page. cnn.com then sends you and html page. The browsers parses the html and sends the information to the HTML renderer. The browser then tells the OS what to display on the screen.
1
Jeff Moser had an excellent technical analysis of an HTTPS request on his blog: The First Few Milliseconds of an HTTPS Connection.
1
There is a really cool video by the "Sendung mit der Maus" (a very popular German children's TV show that explains technology for children):
Die Sendung mit der Maus - Wie funktioniert das Internet (How the Internet works).
In German only, unfortunately, but funny even w/o the text. Men with funny helmets play the IP packets, and the data is written onto paper cards. Classic :-).
BTW, the explanations are actually fairly good.
A great technical explanation can be found in this book: Computer Networking: A Top-Down Approach 6th Edition (Link:Book). (pages 495-500) They go into a considerable amount of detail; starting from what happens when the computer is switched on till the time that a website is displayed in the users browser. You can get a taste of what is mentioned in the book in this set of slides. (Link:Slides 88 to 95)
– Slothworks – 2014-11-11T05:06:13.467You can find detailed informations here: https://github.com/vasanthk/how-web-works or there http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
– mems – 2016-02-16T09:38:58.387