Table of contents
- Introduction
- Browser Structure
- 💡 Browser Rendering Steps
- 1. Document Object Model
- 2. CSS Object Model
- 3. Combine DOM and CSSOM to Create the Rendering Tree
- 4. Layout
- 5. Paint
- How to Optimize Browser Rendering?
- 1. Block Resource Optimization
- Example 1:
- Example 2:
- 2. Preload, Preconnect and Prefetch
- 3. Minimize HTTP Request
Easily explained for beginners with diagrams. Learn about how to optimize your website and how browsers render a web page.
Introduction
Rendering is a process used in web development that turns your codes into an interactive webpage. To simply explain it, rendering is turning your code into a webpage.
The purpose of browser rendering optimization is to increase the loading speed of your website.
Browser Structure
User Interface (UI): Bookmarks, refresh button, URL and back/next button refer to UI in the browser structure. Simply, they are all other parts excluding the actual webpage that users see.
Browser Engine: connects the user interface and rendering engine together. It also loads URLs.
Rendering Engine: displays websites to users by parsing your HTML and CSS codes.
Networking: allows accessing and sending the data using the HTTP protocol.
JavaScript Interpreter: interprets JavaScript codes and executes the codes.
Display Backend: displays general UI components
Data Persistence: This is where the local storage, session storage, and cookies are stored on the client side.
💡 Browser Rendering Steps
These are the steps involved when the browser reads and transform your codes into the webpage.
Create DOM (Document Object Model) tree by parsing HTML
Create CSSOM (CSS Object Model) tree by parsing CSS
Combine DOM and CSSOM to create Rendering Tree
Layout
Paint
1. Document Object Model
In order for the browser to interpret the text files, HTML files need to be transformed in a way that they can be understood by the browser.
DOM refers to the browser's rendering engine loading and parsing the HTML file to transform it into a model that can be understood by the browser.
The diagram above shows 4 steps involved to create DOM.
Transformation
- The browser will receive the bytes of HTML and transform them into characters based on the encoding (UTF-8)
Tokenization
There are tokens that are defined by the W3C. The browser will transfrom the HTML tags to certain tokens.
In the photo, there are tokens, such as StartTag: html, StartTag: head. That shows how <html></html> and <head></head> tags are tokenized.
Transforming tokens into nodes
- Nodes that are between StartTag and EndTag are placed under their parent tag, which forms a hierarchy structure.
DOM Tree is created
- The browser interprets the relationships of the tags that are defined in the HTML markup, which creates DOM tree.
2. CSS Object Model
As you can see, the steps of creating CSSOM are the same as creating DOM.
However, take note that the body element is assigned with font-size: 16px, and all the son of the body tags are assigned with font-size: 16px as well.
3. Combine DOM and CSSOM to Create the Rendering Tree
The rendering tree is basically a combination of DOM and CSSOM trees.
However, only the parts that are needed for browser rendering will be included in the rendering tree.
You will notice that the rendering tree is more simplified because it only contains the elements that are needed for webpage presentation.
4. Layout
In this step, the browser will calculate the actual pixel values for the webpage layout
Your CSS code might be like this:
div {
width: 50%;
}
If your screen's resolution is 1920 x 1080, width: 50%; means that the div element will take about half of 1920px, which is 960px.
The browser will read and interpret width: 50% and turn it into width: 960px.
5. Paint
With the calculated pixel values, the browser will paint and draw the styles on your webpage.
How to Optimize Browser Rendering?
These are the three steps/things you can do to optimize your website.
Block Resource Optimization
Preload, Preconnect and Prefetch
Minimize HTTP Requests
1. Block Resource Optimization
CSS is called render block resource because rendering is blocked while parsing CSS to create CSS Object Model.
This means that optimizing CSS leads to optimizing your website.
To do so, we can use the media attribute of <link> tag
Example 1:
<link href="print.css" rel="stylesheet" media="print">
By writing media="print", the CSS will only create the CSSOM when the user clicks the "print" button. This will eventually prevent blocking rendering due to CSSOM.
Example 2:
<link href="portrait.css" rel="stylesheet" media="oreintation: landscape">
By writing media = "orientation: landscape", the CSSOM will not be created when the user first opens the website. The CSSOM will be created after the user turns their screen to landscape view.
2. Preload, Preconnect and Prefetch
Preload
- Resources that will surely be used can be specified as preload for your website optimization.
<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">
Preconnect
- Preconnect informs the browser that your page intends to establish a connection to another origin.
<link rel="preconnect" href="https://external.com">
Prefetch
- We can use prefetch for resources that will likely be used in the future. The resources will be cached in the browser.
<link rel="preload" as="script" href="tobeused.js">
3. Minimize HTTP Request
Combine external JavaScript and CSS files.
You can use something called webpack to combine your JS or CSS files into one.
Webpack allows you to minify your JS and CSS files.
CSS Image Sprite
CSS sprites are a collection of images combined into one file.
You can use the background-position attribute to show the images that you want to show.
Gzip to minimize your file size.
- This can minimize your file size almost by 70%.