The rendering engine receives the contents of the document by the networking layer. This followed by: -
- creation of the content tree by the rendering engine where the HTML elements get parsed and converted to DOM nodes. CSS Style data is parsed and visual information along with styling is used to create the render tree.
- Rectangles with specific colors and dimensions are arranged inside the rendered tree. They are meant to be in the right order to be rendered on the screen.
- Once the rendered tree is constructed, it is followed by the layout process where each node is given the exact coordinates, according to their expected displayed on the screen.
- The final stage is painting. Each node in the render tree will be designed according to the code written in the back-end layer of the UI. Painting usually takes place in an order: - i) background color, ii) background image, iii) order, iv) stacking of child elements, and v) page outline.