Behind the Scene of Web Rendering

Transcript

1. Behind the Scene of Web Rendering
2. 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
3. What is Rendering?
4. High level structure of a modern Browser
5. Rendering in Browser (Conceptual)
6. 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
7. XML & DOM tree
8. HTML & DOM tree
9. Rendering in Browser (Webkit)
10. HTML parsing
11. HTML to DOM tree construction
12. CSS Parsing
13. CSS to CSSOM tree construction
14. Render tree construction
15. Layout the Render tree
16. Paint
17. 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)
18. Questions? I can always be find with mnishihan keyword
19. 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