DEV Community

Kaziu
Kaziu

Posted on • Updated on

🏗 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
flow of rendering

1.Loading

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 "
create DOM

▼ CSSOM is like DOM of css version
CSSOM

2. Scripting (executing Javascript by JS engine)

scripting

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


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)

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

Discussion (0)