General Flow

Parse HTML and Construct DOM Tree

Constructing DOM tree from HTML

Parse CSS

All the external CSS files, and <style/> elements.

Construct Render Tree (HTML + Style)

The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.

Layout of Render Tree

Layouting means giving each Node the exact coordinates where it should appear on the screen.

Paint Render Tree

Painting each node using the UI backend layer

by howbrowserswork

Tree Structure

Document Object Model (DOM)

CSS Object Model (CSSOM)

source developers.google.com

StyleSheet Structure

span {
    d1; d2; d3;
}
div > p > span {
    d3; d4;
}
p > span {
    d5; d6;
}
h1 -> span {
    d7; d8;
}
nav span {
    d9; d10;
}

RESULT STYLESHEET

const StyleSheet = [
    { // Span
        declerations: [ d1, d2, d3 ],
        direct_parents: [
            { // P
                declerations: [ d5, d6 ],
                parents: [
                    { // Div
                        declerations: [ d3, d4 ],
                        parents: []
                    }
                ]
            },
            { // H1
                declerations: [ d7, d8 ],
                parents: []
            }
        ],
        parents: [
            { // Nav
                declerations: [ d9, d10 ],
                parents: []
            }
        ]
    }
];