A front end web developer needs to understand how the a browser engine functions.
Once the networking layer provides the rendering engine with the contents of the document that is requested, the following flow occurs.
1.A content tree is created by the rendering engine where the HTML elements get parsed and get converted to DOM nodes. Style data in both internal and external CSS are parsed and visual information along with styling is used to create the render tree.
2.Rectangles with specific colors and dimensions are arranged inside the rendered tree.
3.Once the rendered tree is constructed, it follows the layout process where each node is given the exact coordinates, according to which they should be displayed on the screen.
4.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
Background color is assigned first.
It is immediately followed by background image.
Border is assigned.
Children are stacked.
Outline of the page is created.