HTML
1. HTML Parsing & DOM Construction
CSSOM
2. CSSOM Construction
Layout
3. Layout Tree Calculation (Reflow)
Painting
4. Painting (Repaint)
GPU
5. GPU Compositing
HTML Source Code
CSS Style Rules
1. HTML Parsing & DOM Construction
Browser reads raw HTML bytes, converts them into characters and tokens, and builds the Document Object Model (DOM) tree.
Constructed DOM Tree:
#document
└── html
└── body
└── div.card
├── h1 ("Hello World")
└── button ("Click Me")