Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Behind the Scene of Web Rendering

Behind the Scene of Web Rendering

M N Islam Shihan

November 02, 2019
Tweet

More Decks by M N Islam Shihan

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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)
  4. 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