Behind the Scene of Web Rendering

Who am I? Mohammad Nurul Islam (Shihan) • Technical Board Advisor, Deligram Technology Ltd. • Former CTO, Deligram Technology Ltd. • Founder, Sphinx Corporation • Former Web Architect, Jenzabar Inc. • Former Software Engineer, Vantage Labs, Dhaka. • 20+ years in programming • Special interest in Open Source, Software Architecture & Problem Solving

What is Rendering?

High level structure of a modern Browser

Rendering in Browser (Conceptual)

What is DOM? • DOM -> Document Object Model • Derived from XML parsing • Define a tree of node(s) to represent parsed XML • HTML is like XML • So, it can be parsed into DOM • DOM is easy to expose to JavaScript • DOM is easy for rendering & state management

XML & DOM tree

HTML & DOM tree

Rendering in Browser (Webkit)

HTML parsing

HTML to DOM tree construction

CSS Parsing

CSS to CSSOM tree construction

Render tree construction

Layout the Render tree

Paint

Miscellaneous • Compositing (layer tree) • Render blocking resources (css, js) • Style changes & their costs • Layout -> Paint -> Compose (width, height etc.) • Paint -> Compose (background-color) • Compose (transform, translate) • Shadow DOM (DOM isolation) • Virtual DOM (the Present & Future of DOM manipulation)

Questions? I can always be find with mnishihan keyword

Credit & References • How Browsers Work: Behind the scenes of modern web browsers • How Web Works • How Web Browsers Work — Behind the scene Architecture, Technologies, and Internal Working • Critical rendering path • Inside look at modern web browser (part 3) • Inside look at modern web browser (part 4) • Browsers. Magic is inside. • How the browser renders HTML & CSS • Social Icons are from Tom’s Webspace