Browsers Behind the scenes

In your day-to-day life, you may interact with one or more web browsers
without even thinking or comprehending what it is they’re doing. In this part,
I’ll quickly step through the processing that happens in the background when
you click on a link to your favorite website.
Scene: Your office. You’ve just started your computer, and you want to check
the news before diving in to your work. You click your desktop icon for your
favorite web browser, and the browser starts. This is where the fun begins.
The next series of events, which may only take a second or two, go something
like this:
1. Requesting. The browser checks whether it has a default home page set.
It does. Say your default page is news.google.com. The web browser
will use this information to send a request through your local connection
to the Internet. In plain English, it may say something like, “Hi, I’d
like the file at news.google.com.”
2. DNS resolution. Your browser’s request will typically pass through
several routing points on its way to news.google.com, where a web
server will interpret the request and send back a document.
You can see an example of how many different points your request goes
through on its way to the final destination by performing what’s called a
traceroute. Try this:


Open the console window (on Mac OS X) or the command-line
interface (in Windows), and type in the following:
• On Mac OS X (or Unix):
traceroute www.wiley.com
• In Windows:
tracert www.wiley.com
You’ll see a series of numbered lines of text fly by. Each of these
represents a different node (that is, computer on the network) that
your computer hops through (visits briefly) on its way to finding
the address you requested. Your traceroute results may look
something like the following. Note: The final step, with the asterisks,
is most likely the final destination, but the server hosting
wiley.com is configured to ignore traceroute requests.
traceroute wiley.com
traceroute to wiley.com (208.215.179.146), 64 hops max, 52 byte packets
1 10.0.1.1 (10.0.1.1) 1.679 ms 0.739 ms 1.017 ms
2 [my home network’s address] 1.288 ms 1.404 ms 1.233 ms
3 172.22.4.5 (172.22.4.5) 1.018 ms 0.950 ms 1.479 ms
4 172.21.1.9 (172.21.1.9) 4.862 ms 1.558 ms 1.540 ms
5 172.21.0.254 (172.21.0.254) 1.782 ms 2.321 ms 1.556 ms
6 te-4-1.car1.sacramento1.level3.net (4.53.200.9) 7.195 ms 6.543 ms
6.627 ms
7 ae-11-11.car2.sacramento1.level3.net (4.69.132.150) 7.056 ms 7.054 ms
8.013 ms
8 ae-4-4.ebr2.sanjose1.level3.net (4.69.132.158) 7.046 ms 7.368 ms
7.644 ms
9 ae-62-62.csw1.sanjose1.level3.net (4.69.153.18) 6.759 ms 5.958 ms
ae-92-92.csw4.sanjose1.level3.net (4.69.153.30) 7.313 ms
10 ae-3-80.edge2.sanjose3.level3.net (4.69.152.145) 44.113 ms
ae-2-70.edge2.sanjose3.level3.net (4.69.152.81) 7.604 ms
ae-4-90.edge2.sanjose3.level3.net (4.69.152.209) 7.480 ms
11 192.205.32.205 (192.205.32.205) 17.387 ms 17.349 ms 17.328 ms
12 cr1.sffca.ip.att.net (12.122.86.90) 79.150 ms 79.372 ms 78.698 ms

13 cr1.cgcil.ip.att.net (12.122.4.122) 77.725 ms 78.639 ms 77.657 ms
14 cr2.cgcil.ip.att.net (12.122.2.54) 76.990 ms 76.681 ms 77.127 ms
15 cr1.n54ny.ip.att.net (12.122.1.1) 80.434 ms 80.396 ms 80.775 ms
16 cr81.nw2nj.ip.att.net (12.122.105.30) 76.866 ms 75.886 ms 76.650 ms
17 12.122.115.105 (12.122.115.105) 75.429 ms 74.989 ms 75.171 ms
18 12.94.29.178 (12.94.29.178) 81.303 ms 81.196 ms 81.357 ms
19 * * *


Loading. When your browser finds the correct server, it receives the
document from the remote server along with any associated files. This
process is called loading.


Parsing. After all the files needed to put the page together are loaded,
the browser goes through your document and breaks it up into parts
that it can understand — specifically a Document Object Model (DOM)
tree (for more about the HTML DOM, flip over to Chapter 11). This process
is called parsing.
5. Script execution. After parsing, the browser will execute any scripts it
finds in your document (generally JavaScript).
6. Style resolution. Style resolution is where the browser figures out what
everything should look like on the page.
7. Painting. After everything is loaded, the document has been parsed, and
the rest of it, your browser will “paint” the web page to the screen for
you to see.
8. Event handling. After the document is painted, the browser sits and
waits for you to do something else so it can react in a way that the justloaded
page instructed it to. This reaction to an event is event handling.
These steps aren’t just nice to know for the next time you play Web Browser
Pub Trivia. It’s actually quite helpful to know (for example) that script execution
happens before style resolution. For example, if you write a script that
prints a line of text to the browser, you can be sure that any formatting
(using CSS) that you also write to make that text look good will be applied
after the text has been written.