Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

How browsers work

You know a bit about HTML, CSS, and JavaScript but do you now how a browser gets and uses these files to display a website?

A browser has a UI (user interface) that most commonly includes an address bar, back/forward button, and reload button. Sometimes developers refer to this as the “chrome” (little “c”, not Chrome by Google) of a browser. When you navigate to a URL in the address bar you are making a “request” for the content at that URL.

That URL you typed into the address bar maps to an IP address. This is called a DNS lookup. DNS stands for “Domain Name System” and it maps numeric computer addresses to human readable names. All computers have an IP address. You can find out your personal computer’s IP address by typing “ifconfig” into your terminal window and looking for the number that is displayed in dot decimal format, such as 000.000.000.000. (Note that 127.0.0.1 is used in your computer internally to refer to itself).

For example, one IP address for Google is 74.125.134.102. You can enter 74.125.134.102 in the address bar and it will show the contents at www.google.com.

Once the browser has the IP address it sends an HTTP request to the web server at that address. HTTP stands for “Hypertext Transfer Protocol” and is used to facilitate requests from your client (the browser) and responses from the server. In our case the response is HTML from the web server at www.google.com.

As this HTML response is being sent to your browser, the browser’s rendering engine is displaying the requested content on your screen. To accomplish this the rendering engine “parses” the HTML and creates a DOM tree.

To illustrate this, the rendering engine takes this HTML response:

// Simplified Google.com markup <!DOCTYPE html> <html> <head> <title>Google</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <h1>Google</h1> <img alt="Google" src="/logos/google.jpg"> <input> <button>Google Search</button> </body> </html> 

And turns it (conceptually) into a DOM tree like this:
(photoshop is being a PITA! I’ll try to add an appropriate graph later)

The browser then parses style data (CSS or inline styles) and together with the HTML it constructs a render tree. The render tree displays rectangles (that represent divs, paragraphs, headlines, etc.) with a few visual attributes such as color and size dimensions. These rectangles are displayed in order on the page. Next, the browser lays out the contents in the position they will appear in the browser. The last step is “painting” where the elements are drawn on the screen.

As the browser is rendering the HTML it will find tags (like our link tag and our img tag) that require files from other URLs. The browser will send a request to the web server to get each of these files.

(Note: some interesting things happen in regards to caching but I’m overlooking them for now. I’ll include them in a later post).

notes about major browsers

Firefox uses the Gecko rendering engine, a Mozilla product. Both Safari and Chrome (and now Opera on mobile?) use Webkit as a rendering engine, which is an open source project. IE uses the Trident rendering engine.

If you’re curious (as I am!) here’s the world wide browser market share in 2012:

IE, 54.13%
Firefox, 19.99%
Chrome, 18.55%
Safari, 5.21%
Opera, 1.63%
Other, 0.49%

That was a quick and dirty overview. As the weeks go on I’ll dive deeply into each component, even getting down through the deeper layers of the network reference model. If you’re not sure what that is, you’ll know soon! (Hint: it’s how all those 0s and 1s travel over the wires).

Sources:
http://taligarsiel.com/Projects/howbrowserswork1.htm
http://bgr.com/2012/11/01/browser-market-share-october-2012-chrome-internet-explorerer/

This post was originally published at Marthakelly.github.com.

Your email address will not be published.

2 comments

  1. Balc Replied

    Good article…. Keep posting on interesting topics..

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.