Slide 1

Slide 1 text

Behind the Scene of Web Rendering

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What is Rendering?

Slide 4

Slide 4 text

High level structure of a modern Browser

Slide 5

Slide 5 text

Rendering in Browser (Conceptual)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

XML & DOM tree

Slide 8

Slide 8 text

HTML & DOM tree

Slide 9

Slide 9 text

Rendering in Browser (Webkit)

Slide 10

Slide 10 text

HTML parsing

Slide 11

Slide 11 text

HTML to DOM tree construction

Slide 12

Slide 12 text

CSS Parsing

Slide 13

Slide 13 text

CSS to CSSOM tree construction

Slide 14

Slide 14 text

Render tree construction

Slide 15

Slide 15 text

Layout the Render tree

Slide 16

Slide 16 text

Paint

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

Questions? I can always be find with mnishihan keyword

Slide 19

Slide 19 text

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