To load a web page you type in a URL or select a link, hit the Enter key and are taken to a web page. In this page, I try to explain the prosess that take place under the hood: getting the IP address, uploading cookies, parsing the HTML, executing the scripts, loading the CSS in a separate thread, building the DOM and the render tree and displaying the page.

Web browsers are the most widely used software applications. They let you visit websites and do activities within them like login, view multimedia, link from one site to another, visit one page from another, print, send and receive email, among many other activities. The most common browser on the market are: Microsoft Internet Explorer, Google's Chrome, Mozilla Firefox, Apple's Safari, and Opera.

To load a web page you type in a URL or select a link on a web page, hit the Enter key and are taken to a web page. You are not really concerned what goes on behind the scene. But have you ever wondered how a web browser works and displays the web page on your computer? I try to explain this hereunder. Figure 1 illustrates the process.

Client-server diagram [from ITP 104 - Internet Publishing Technologies]

Browser's components

Browsers are not simple application as the description given above implies. They are special pieces of software that interpret the HTTP protocol and render HTML into a human-readable form in a way that is as compliant as possible with the W3C's HTML and CSS specifications. They are generally comprised of the following components:

Browser's components
[from How Browsers Work: Behind the scenes of modern web browsers]

• User Interface - includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page;
• Browser engine - marshals actions between the UI and the rendering engine;
• Rendering engine - responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen. Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit;
• Networking - for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface;
• UI backend - used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods;
• JavaScript interpreter - used to parse and execute JavaScript code; and
• Data storage - this is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

Now, let's go under the hood

What exactly happens after you enter a URL, until you see the site content? There is a well defined flow of actions that the browser does internally, like building the DOM and render trees and painting. There is also a set of optimizations taken to ensure that the web site is presented quickly and smoothly. The rendering of the web site is not a single action by the browser, but a set of small updates and constant reactions to interactions.

When you request a page from a server, the URL you typed into the address bar or the link that you clicked on 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. Once the browser has the IP address it sends an HTTP request to the web server at that address and this request is accompanied by whatever cookies the browser has stored which is associated with the server.

In response to this request, the server downloads the page and the rendering engine of the browser starts the line-by-line, synchronous parsing of the HTML document and convert elements to DOM nodes in a tree called the "content tree".

1. When a <script> tag is encountered during the parsing, the script is executed immediately and the document parsing halts until the script is executed. If the script is external then the resource must be first fetched from the network, the parsing halts until the resource is fetched. This was the model for many years and is also specified in HTML 4 and 5 specifications.
2. When a <style> tag is met, the model is different. It seems that since style sheets don't change the DOM tree, there is no reason to wait for them and stop the document parsing. The style sheet is thus downloaded in a separate thread, independant from the main thread. However, there is an issue if a script asks for style information before the style is loaded and parsed: Gecko will block all scripts when there is a style sheet that is still being loaded and parsed. Webkit will block scripts only when they try to access certain style properties that may be effected by unloaded style sheets.

Styling information together with visual instructions in the HTML will be used to create another tree: the "render tree" which contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen. After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen. The next stage is painting – the render tree will be traversed and each node will be painted using the UI backend layer.

It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.

Conclusion

This is a shallow description of what happend when a browser loads a page. If you want an in-depth coverage of the subject, I recommend "How Browsers Work: Behind the scenes of modern web browsers" by Tali Garsiel and Paul Irish published August 5th 2011;

References

1. How Browsers Work: Behind the scenes of modern web browsers by Tali Garsiel and Paul Irish published August 5th 2011;
2. How Web Pages Work by Marshall Brain on HowStuffWorks;
3. How do web browsers work and how are web pages displayed?
4. How does the Internet work by W3C Working Group;
5. How browsers work by Martha Girdler on February 24th 2013;
6. How Browsers Work: Behind the Scenes by Spyros Doulgeridis;