🏗 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.

browser	rendering engine	javascript engine
Chrome	Blink	V8
Firefox	Gecko	SpiderMonkey
Safari	Webkit	Nitro
Edge	EdgeHTML	Chakra
opera	Blink

*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