This article was originally posted on ctrl-y blog. Also, you can find a Spanish version of this article in ctrl-y blog/es.
On the Side Note section at the end of each article, I like to share what I was listening to while writing machine or human words. I ❤️ music so I spend time (sometimes a bit too much) searching for, or creating, long playlists so I can listen to them while I'm working.
Recently, I was hearing the Ladybug’s Podcast episode: “Level Up with Javascript” were one of the podcasts’ host resumed how the web browser works. She explained it so helpful and straightforward that it picked my curiosity into searching a bit more about the topic.
The Ladybugs suggested some resources, so I followed suit. And wow, I had not appreciated the processes that occur between ‘Saving’ my front-end code and observe my code elements on the screen.
The rendering engine is one of the basic components of a web browser. It’s responsible for interpreting the HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and Javascript files to present (render) them on screen, in other words, convert them to pixels.
The process that goes from interpreting HTML, CSS, and Javascript to pixel conversion can be grouped in 4 (four) general steps:
- Parsing of the HTML document to DOM (Document Object Model).
- CSS file interpretation (CSSOM – Cascading Style Sheets Object Model) for each of the DOM nodes.
- Creation of the new tree that includes the DOM, and each node’s style and layout.
- A render tree is rendered.
But, before we go any further with a web browser’s render tree, have you ever participated, or seen, a sports game where fans of a team sing while a visual shows as big as the dimensions of a public sector? The following image is an example of what I am talking about.
Why the question?
Because I am going to explain how the rendering engine of the browser works similarly as a stadium filled with people that together, they illustrate a message while they chant to their favorite team.
Disclaimer: To use a sports event as an example will result in a limitation of a detailed explanation. So, I will explain the details of certain processes in separate articles. This will help to maintain this article short, and prevent you from getting bored of reading me.
Parsing: HTML to DOM
Web browsers do not interpret HTML files the same as programmers write them. That is why the rendering engine is in charge of parsing (analyze and separate) the HTML structure into objects that the browser can read.
The rendering engine receives the HTML files as a stadium receives sports fans waiting in line. With lots of people entering consecutively but the stadium does not understand how does each fan group relates to one another or how are they going to be seated.
That’s what the stadium staff is for. They can read each person’s ticket and direct them to their respective chair to structure the team visual that will be seen during the game.
When browsers parse, they consider the HTML tags, and how they are nested, to create objects and relate them, including the DOM (Document Object Model).
The DOM is a document that models the relationship between the different objects, or nodes, that structure the web page.
The document model can be manipulated using Javascript. Some manipulation examples include adding nodes and changing node colors.
The process of creating these objects is more complex, so I will not be detailing the process in this article. But, by this point, the DOM knows how the web page will be structured. Although it still has not interpreted how the web page will be styled or laid out.
On our sports fan example, by this point, each fan group has entered the stadium and are seated. But, they still do not have the colored cardboard they are going to display during the chant.
CSSOM Construction
Ten (10) minutes before the game starts, the stadium staff with lots of colored cardboard on hand, begin to walk to each corner of the seated rows.
Each cardboard has a seat number assigned, so the visual, at large, makes sense. Let’s say that each carton was appointed to a specific chair by a style calculation.
After converting the HTML into the DOM, the render engine assigns the styles described in the CSS file to each DOM node. This assignment is known as CSS style computation. This process includes selector pairing and style cascading process (hence the name Cascading Style Sheets).
CSS style computation is a topic that can take up to an entire article, so I will not inquire about that in this article. But, for the sake of this article, it is essential to know that during this stage, the rendering engine assigns styles to each DOM node like color, font, and border.
When DOM nodes are assigned a style, it constructs a new tree. This tree is called the CSSOM (Cascading Style Sheets Object Model).
Up to this point, the rendering engine knows the page's structure and each element’s style.
Rendering Tree
Stadium staff begins to distribute each colored cardboard, and the energy of the crowd transforms from conversations to the excitement for the beginning of the game.
The process of distributing the cardboard assigned to each seat can represent the size and position of the node on the screen.
The squared form of each cardboard can also represent the elements that will show on the screen.
Once each node from the DOM has its style assigned, the rendering engine computes the size of each node and its position on the screen.
The result of this computation is a rendering tree. Were boxes represent each of the web page’s elements.
All of a sudden, the microphone turns ON, and a staff member welcomes the crowd. The game is about to begin.
Paint the render tree
The rendering engine is responsible for painting on screen the new render tree.
What does painting on-screen means?
Part of the computer’s memory goes to pixels. It is in the pixel memory spaces were the rendering engine sets the style value for each node. That is how pixels get their color, shape, and position.
The crowd goes wild when the home team is announced. The battle chant begins. Each person from the crowd puts the cardboard over their head.
The cardboard paint each stadium seat with the color, shape, and position required for the message for the team can be appreciated.
“We are ready”, it reads. The energy is glorious.
Resources
As mentioned at the beginning of this writing, this article was inspired by Ladybug’s Podcast episode: “Level Up with Javascript”.
The Ladybug Podcat’s suggestions led me to a different podcast episode that inspired me with the illustrations, The Code Newbie episode: “How Do Browsers Work?. The programmer and artist Lin Clark details how web browsers function, and her work at Mozilla.
Also, Lin Clark wrote another article: “Inside a Super Fast CSS Engine: Quantum CSS (aka Stylo)” which details the role of CSS when rendering a page.
Lin Clark’s drawings and explanations helped me understand the rendering engine. She goes more into detail of what I vaguely explained in this article so I would invite you to read those articles if you want to inquire more.
Side Note
I wrote this article listening to the playlist “Creativity Boost” created by Mia Astral on Spotify. This playlist was recommended by a dear friend. It has a great mix of upbeat but smooth music that helped me focus.
Top comments (3)
Great article!
I want to know about the browser core things go over JavaScript surface,
so this article gives me a lot of learing.
Thank you!
Thank you very much . I am looking for the article describing the page rendering process in a browser. This helps a lot.
This is the best article, I have read so far.
Thanks a lot for sharing the links to the resources.