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
540

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
25
PG FDW FTW
mehlah
0
140
Product culture
mehlah
0
39
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
150
Middleware all the things
mehlah
2
820
Confident refactors
mehlah
1
100

Other Decks in Programming

See All in Programming
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
0
120
Recoilを剥がしている話
kirik
5
6.8k
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
140
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
Haze - Real time background blurring
chrisbanes
1
510
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
280
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
快速入門可觀測性
blueswen
0
370
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
命名をリントする
chiroruxx
1
410
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
Exploring: Partial and Independent Composables
blackbracken
0
100

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Site-Speed That Sticks
csswizardry
2
190
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
A designer walks into a library…
pauljervisheath
204
24k
Producing Creativity
orderedlist
PRO
341
39k
For a Future-Friendly Web
brad_frost
175
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k

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