How does the browser actually show you a webpage? When your browser receives the data necessary to display a webpage, how does it actually show you the page? The answer is through rendering! Let me take you down the yellow brick road of rendering known as the ‘critical rendering path’!
“Theres no place like the render tree, Toto!”
The Beginning
The browser actually receives the data to make a webpage in the form of binary strings. 8 units of binary code evaluate to 2 characters known as a byte. So it parses the binary bytes into characters, in a process known as ‘conversion’.
A byte which evaluates to the characters ’77’
These characters are then converted into tokens, which look like the html tags we are more familiar with: ‘<html><head>…’. In a fancy process that I don’t totally understand called ‘lexing‘ these tokens are converted into objects known as nodes.
HTML Parsing
These nodes are then assembled using the DOM API provided by the browser in something called the HTML DOM (document object model). This is an essentially a flowchart which plots the relation of all the HTML objects within the page to each other.
CSS Parsing
In the process of parsing the HTML document, the browser will find a link which directs the browser to the CSS stylesheet. The browser then parses this and generates what is called the CSSOM, or the CSS Object Model. The CSSOM is also a tree structure, indicating the dependencies and relationship of style properties to the HTML objects.
Looks like there’s CSSomething cool going on here with this tree
The Render Tree
The CSSOM and the HTML DOM are combined into the render tree. The browser is ready to begin on the next step…
Layout
Its sort of like assembling the scaffolding for a house…
This sounds like a concept but in this context it is actually a process: the browser sets up the elements of the render tree on the page, going in order of the flow of the document. So things like the location and size of the header, paragraph elements, navigation bar, paddings and margins are oriented on the page.
Painting
The fun step! The browser is now going to apply color to the page. It will look at the render tree for background colors, images, and fonts to prettify your page and assign color values to all the pixels.
The page before painting > the page after painting
Compositing
The final step is compositing, where the browser deals with things like opacity and object transformations. So if you hover over a button, and the button gets bigger, this is a function which is handled in the compositing stage. These changes add important interactivity and polish to the page.
—————————————————————————-
And that’s it! Now you have your beautiful web page just as the designer intended! Unless you’re in IE11….
References:
Hansa U. An Introduction To Browser Rendering.; 2016. https://www.youtube.com/watch?v=n1cKlKM3jYI. Accessed December 16, 2021.
Ilya G. Constructing the Object Model. Google Developers. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model. Published 2021. Accessed December 16, 2021.
Critical rendering path – Web Performance | MDN. Developer.mozilla.org. https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path. Published 2021. Accessed December 16, 2021.