The rendering process of a web page.

There are some web developers that don't care about HTML code structure or ignore the amount of CSS rules being overridden, simply because they don't know about some concepts that we will see below.

Understanding about concepts and processes used by the browser to renderize a web page is really important when we are working on projects where performance and user experience are crucial.

DOM and CSSOM

The server delivers a piece of HTML code that is parsed by the browser and a tree is generated. This tree is called DOM. Moreover the browser also receives CSS instructions which are parsed and this generates another tree called CSSOM.

Render Tree construction.

Render Tree

With the two processes of parsing concluded and with DOM and CSSOM defined, the browser creates a render tree. A render tree is another tree internally stored by the browser and used to represents visual elements. The elements inside <head> are ignored as well as elements defined with display: none. However is worth remembering that elements with visibility: hidden are still part of the tree.

Once the render tree is complete, the browser can execute the process of reflow and repaint.

Reflow

The process used by the browser for positioning elements on the screen is called Reflow.

This process is executed always a DOM element is manipulated, any CSS rule about position or geometry is changed or when the browser is resized. The reflow process is executed for each element's children, ancestors and elements that appear after it in the DOM, once it needs to re-calculate the styles based on the target element.

Repaint

Also known as redraw, repaint is the name of the process used by the browser when it needs to update some style that is not about layout. In other words styles not related with position, width or height. An example would be a manipulation of the background color.

Avoiding reflows and repaints

An approach to reduce bad effects caused by reflows and repaints is reducing the number of requests made by styles informations, avoiding adding or removing elements, updates or animations in the DOM, windows resizing, change the font size and make unnecessary page scroll.

Knowing about these processes may help when you need to discuss about some concepts that require a lot of browser’s resource in projects that care about performance on frontend.

So, before making a DOM manipulation makes sure that there is no better way to execute the issue at hand.