🏗 Structure of browser rendering engine

You can not fix your car, if you don't know about car...
by me 😝

→ yeah you should know about browser at first

👍 Two important components on Browser

1. Rendering engine

Read files like HTML,images,css,Javascript and paint on browser

2. Javascript engine

Execute Javascript, simple.

*V8 is used in Node.js as well

🌐 Flow of rendering on Browser

Roughly speaking, flow is structured by these 4 steps

1.Loading

• getting data(html, css, javascript, image files...) from server

↓

• parse (creating DOM tree, CSSOM tree)

▼ DOM is created like this
From google developer article "Constructing the Object Model "

▼ CSSOM is like DOM of css version

2. Scripting (executing Javascript by JS engine)

create AST(abstract syntax tree) which is possible to compile. it's similar to DOM,CSSOM
from this website

↓
compile (transform to machine code, then CPU can understand what javascript wants to do)
▼ types of compiles

• JIT(Just in time)

  compile script when code is executing. Javascript is JIT

• AOT(Ahead of time)

  compile before executing like Java,C

↓
execute
Javascript can handle DOM tree which is created before via DOM API.

3.Rendering (calculating layout)

find css properties for all DOM elements

• background-color: green; for btn-success class
• border-radius: 5px: for header id ...

↓
then layout

• width, height
• margin
• padding
• position
• z index ...

4.Painting (finally we see something on browser!)

Paint
order to 2D graphic engine
↓
Rasterize
paint on actual pixel on your display by using order which was created by graphic engine

😥 Re-rendering

We've done it !!! yeah....
unfortunately no...
Because of javascript event or some action on browser, it's necessary to render again.

↑ This is one of the important problem of javascript no matter what kinda library you use like React,Vue,Angular