Create Form

Event Propagation Demo Section

GrandParent
Parent

Open the console and click the Child Button to observe Event Bubbling and Event Capturing.

Browser Rendering Pipeline Section

HTML
Parsing
Tokenization
DOM Tree
CSS
CSSOM Tree
Render Tree
Layout
Paint

HTML: HTML is raw Hypertext Markup which browser receives

HTML ParsingBrowser Reads the HTML document by Character and understand its structure.

HTML Tokenization HTML is converted into tokens such as tagName, attributes and textNode

DOM Tree:Browser creates a tree structure representing the HTML.

CSS: CSS holds visual styles of our web

CSSOM Tree:CSSOM tree hold visual tree object like structure of CSS rules/styles

Render Tree: The Browser then combines Structure from DOM tree and Styles/rules from CSSOM tree

Layout:Browser calculates element sizes and positions.

Paint: Browser draws pixels on the screen with all made previous values.

Screen:Final Web Page which User sees