Skip to content

Latest commit

 

History

History
84 lines (66 loc) · 1.99 KB

README.md

File metadata and controls

84 lines (66 loc) · 1.99 KB

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

A diagram

by howbrowserswork

Tree Structure

Document Object Model (DOM)

A diagram

CSS Object Model (CSSOM)

A diagram

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: []
            }
        ]
    }
];