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

How the browser renders a web page

Mehdi Lahmam B.
December 08, 2015
Programming
1
530

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

Mehdi Lahmam B.

December 08, 2015
Tweet

More Decks by Mehdi Lahmam B.

See All by Mehdi Lahmam B.
Possible to measure developer productivity?
mehlah
0
23
PG FDW FTW
mehlah
0
140
Product culture
mehlah
0
36
OpenAPI and AsyncAPI specifications as contracts
mehlah
0
630
Technical Debt
mehlah
1
260
Data informed growth
mehlah
0
190
Serverless Ruby and AWS Lambda
mehlah
0
140
Middleware all the things
mehlah
2
810
Confident refactors
mehlah
1
97

Other Decks in Programming

See All in Programming
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism - An Example
philipschwarz
PRO
0
170
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
C#/.NETのこれまでのふりかえり
tomokusaba
1
160

Featured

See All Featured
Practical Orchestrator
shlominoach
186
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Done Done
chrislema
181
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Docker and Python
trallard
40
3.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building an army of robots
kneath
302
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k

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; }