The following sequence occurs:
a. The Web Browser performing a DNS lookup on the given URL.
b. Using the retrieved host-name from the DNS Lookup, the Web Browser communication-layer component creates and opens a TCP connection to the Web Server.
c. Using the opened TCP connection, the Web Browser construct and transmits an HTTP GET request with the relevant details (e.g. URL, User-Agent, Accepted-Content) to the Web Server.
d. In turn, the Web Server performs its internal process on the income HTTP request and responds its results in the form of HTTP Response packet back to the Web Browser.
e. Upon successful HTTP Response packet arrival to the Web Browser, the Web Browser’s Layout Engine is starts to take its rendering actions – There are three major engines out there: Gecko, WebKit and Trident.
f. The Web Browser extracts and parses out the HTML source-code from the HTTP Response packet and constructs a DOM tree out of it, which is a data representation where every HTML tag has a corresponding node in the tree and the text chunks between tags get a text node representation too. The root node in the DOM tree is the documentElement (the <html> tag).
h. The engine parses out the inline & external style-sheets (CSS) instructions. The rendering information in each style-sheet gets attached to the matching node in the DOM tree.
j. While the DOM tree is being constructed by the Layout Engine, the browser constructs another tree, the render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. The purpose of this tree is to enable painting the contents in their correct order. The render tree is sort of like the DOM tree, but doesn't match it exactly. The render tree knows about styles, so if you're hiding a div with display: none, it won't be represented in the render tree.
k. In between the Render tree construction and the painting of the page to the screen, there is a Layout calculation of the page’s elements positions and sizes.
l. Once the render tree is constructed, the engine can paint (draw) the render tree nodes on the screen. And voilà! The user see the requested webpage in his Web Browser!