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

How the browser renders a web page

Avatar for Mehdi Lahmam B. Mehdi Lahmam B.
December 08, 2015
Programming
1
560

How the browser renders a web page

A short introduction to the rendering process of a web page with a profiling demo using Chrome DevTools
Avatar for Mehdi Lahmam B.

Mehdi Lahmam B.

December 08, 2015
Tweet

More Decks by Mehdi Lahmam B.

See All by Mehdi Lahmam B.
Possible to measure developer productivity?
Avatar for Mehdi Lahmam B. mehlah
0
33
PG FDW FTW
Avatar for Mehdi Lahmam B. mehlah
0
150
Product culture
Avatar for Mehdi Lahmam B. mehlah
0
48
OpenAPI and AsyncAPI specifications as contracts
Avatar for Mehdi Lahmam B. mehlah
0
640
Technical Debt
Avatar for Mehdi Lahmam B. mehlah
1
280
Data informed growth
Avatar for Mehdi Lahmam B. mehlah
0
200
Serverless Ruby and AWS Lambda
Avatar for Mehdi Lahmam B. mehlah
0
160
Middleware all the things
Avatar for Mehdi Lahmam B. mehlah
2
830
Confident refactors
Avatar for Mehdi Lahmam B. mehlah
1
110

Other Decks in Programming

See All in Programming
By the way Google Cloud Next 2025に行ってみてどうだった
Avatar for Kento.Yamada ymd65536
0
110
Optimizing JRuby 10
Avatar for headius headius
0
560
2025-04-25 GitHub Copilot Agent ライブデモ（スクリプト）
Avatar for GOAMI Takaaki goataka
0
100
Creating Awesome Change in SmartNews! En
Avatar for Ikuo Suyama martin_lover
0
110
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
530
設計の本質：コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
Avatar for nrs nrslib
10
3.7k
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
100
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
AI時代の開発者評価について
Avatar for Ayuusu ayumuu
0
230
Enterprise Web App. Development (1): Build Tool Training Ver. 5
Avatar for Koichi NAKAGAWA knakagawa
1
120
ComposeでWebアプリを作る技術
Avatar for てべすてん tbsten
0
130
監視 やばい
Avatar for syossan27 syossan27
12
10k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
76
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
23
2.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
780
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
2.9k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
The Language of Interfaces
Avatar for Des Traynor destraynor
157
25k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k

Transcript

  1. How.the.browser renders.a.web.page?¬ @mehlah

  2. Mehdi Lahmam @mehlah Product designer and secretary-at-large at Craftsmen

  3. The browser

  4. The browser's high level structure +-------------------------------------------+ +-------+ | | |

    | | User Interface | | | | | | | +---------------------+--------------------++ | | | | | | | | | | +------------------v------------------+ | | | | | | | | | Browser Engine +-------> | | | | | | +------------------+------------------+ | | | | | | | | | | | +------------------v------------------+ | | | | | | | | | Rendering Engine | | | | | | | | | ++-----------------+-----------------++ | +-------+ | | | | +----------------v-+ +----------v-------+ +----v--v----------+ | | | | | | | Networking | | JS Interpreter | | UI Backend | | | | | | | +------------------+ +------------------+ +------------------+ Data Persistence

  5. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  6. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  7. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  8. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  9. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  10. Rendering Engine +-----------+ +-----------+ | | | | | HTML

    +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  11. The Document Object Model +-----------+ +-----------+ | | | |

    | HTML +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  12. Bytes ! characters ! tokens ! nodes ! object model

  13. <html> <head></head> <body> <p class="wat"> My super markup </p> <div>

    <span> Something great </span> </div> </body> </html> HTMLHtmlElement |-- HTMLHeadElement `-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

  14. <body> <p class=wat>My super markup <div><span>Something great HTMLHtmlElement |-- HTMLHeadElement

    `-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

  15. CSSOM +-----------+ +-----------+ | | | | | HTML +------>

    DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  16. Render/Frame Tree DOM + CSSOM +-----------+ +-----------+ | | |

    | | HTML +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  17. Render/Frame Tree Combines the two object models, style resolution This

    is the actual representation of what will show on screen Not a 1-to-1 mapping of your HTML

  18. Layout Computing geometric information for each node +-----------+ +-----------+ |

    | | | | HTML +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  19. Recursive process Traverse Render Tree Nodes position and size Global

    and Incremental layouts Layout

  20. Display content on the screen Painting +-----------+ +-----------+ | |

    | | | HTML +------> DOM +--+ | | | | | +-----------+ +-----------+ +----------+ +-----------+ +-----------+ +----> | | | | | | Render +------> Layout +------> Paint | +-----------+ +-----------+ +----> Tree | | | | | | | | | | +-----------+ +-----------+ +----------+ | CSS +------> CSSOM +--+ | | | | +-----------+ +-----------+

  21. Recap Parsing --> DOMTree DOM Tree --> Render Tree Is

    actually 4 trees Layout computes where a Node will be on the screen Painting computes bitmaps and composites to screen

  22. Recap Parsing --> DOMTree DOM Tree --> Render Tree Is

    actually 4 trees Layout computes where a Node will be on the screen Painting computes bitmaps and composites to screen

  23. A way lot more to learn Let's build a browser

    engine! http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html HTML5 Rocks How Browsers works http://www.html5rocks.com/en/tutorials/internals/howbrowserswork Rendering in Webkit https://www.youtube.com/watch?gl=US&v=RVnARGhhs9w Website Performance Optimization https://developers.google.com/web/fundamentals/performance/critical rendering-path/?hl=en

  24. /_ __/ /_ ____ _____ / /_______ / / /

    __ \/ __ `/ __ \/ //_/ ___/ / / / / / / /_/ / / / / ,< (__ ) /_/ /_/ /_/\__,_/_/ /_/_/|_/____/

  25. _______ ______ ___ |__________/_/____________ __ /| |__ __ \ _

    \_ ___/ __ \ _ ___ |_ /_/ / __/ / / /_/ / /_/ |_| .___/\___//_/ \____/ /_/

  26. Layout Invalidation div1.style.marginLeft = “10px”; // layout invalidated var h1

    = div1.clientHeight; // reflow div2.classList.add(“x”); // layout invalidated var h2 = div2.clientHeight; // reflow doSomething(h1, h2); div1.style.marginLeft = “10px”; // layout invalidated div2.classList.add(“x”); // layout invalidated var h1 = div1.clientHeight; // reflow var h2 = div2.clientHeight; doSomething(h1, h2);

  27. Layout Invalidation .button:hover { border: 2px solid red; margin: -2px;

    } .button { border: 2px solid transparent; } .button:hover { border-color: red; }