ABN Techweek – How does the browser render a web page?
HOW DOES THE BROWSER RENDER A WEB PAGE?
1. PARSE HTML AND GENERATE DOCUMENT OBJECT MODEL (DOM) TREE.
WHEN THE BROWSER RECEIVES THE HTML DATA FROM THE SERVER, IT IMMEDIATELY PARSES IT AND CONVERTS IT INTO A DOM TREE.
2. PARSE CSS AND GENERATE CSSOM TREE.
THE STYLES (CSS FILES) ARE LOADED AND PARSED TO THE CSSOM (CSS OBJECT MODEL).
3. COMBINE DOM TREE AND CSSOM TREE TO CONSTRUCT THE RENDER TREE.
WITH THE DOM AND CSSOM, A RENDERING TREE WILL BE CREATED. THE RENDER TREE MAPS ALL DOM STRUCTURES EXCEPT INVISIBLE ELEMENTS (SUCH AS <HEAD> OR TAGS WITH DISPLAY:NONE; ). IN OTHER WORDS, THE RENDER TREE IS A VISUAL REPRESENTATION OF THE DOM.
4. LAYOUT.
THE CONTENT IN EACH ELEMENT OF THE RENDERING TREE WILL BE CALCULATED TO GET THE GEOMETRIC INFORMATION (POSITION, SIZE), WHICH IS CALLED LAYOUT.
5. PAINTING.
AFTER THE LAYOUT IS COMPLETE, THE RENDERING TREE IS TRANSFORMED INTO THE ACTUAL CONTENT ON THE SCREEN. THIS STEP IS CALLED PAINTING. THE BROWSER GETS THE ABSOLUTE PIXELS OF THE CONTENT.
6. DISPLAY.
FINALLY, THE BROWSER SENDS THE ABSOLUTE PIXELS TO THE GPU AND DISPLAYS THEM ON THE PAGE.
