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
Top comments (0)