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
37
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
820
Confident refactors
mehlah
1
98

Other Decks in Programming

See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.5k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Better Code Design in PHP
afilina
PRO
0
120
EventSourcingの理想と現実
wenas
6
2.3k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Navigating Team Friction
lara
183
14k
Unsuck your backbone
ammeep
668
57k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Language of Interfaces
destraynor
154
24k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Thoughts on Productivity
jonyablonski
67
4.3k
YesSQL, Process and Tooling at Scale
rocio
169
14k

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