Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How the browser renders a web page (long version)
Search
Mehdi Lahmam B.
April 22, 2016
Programming
1
450
How the browser renders a web page (long version)
Slides for my talk at Mix-It conference
https://www.mix-it.fr/session/2712/
Mehdi Lahmam B.
April 22, 2016
Tweet
Share
More Decks by Mehdi Lahmam B.
See All by Mehdi Lahmam B.
Possible to measure developer productivity?
mehlah
0
41
PG FDW FTW
mehlah
0
160
Product culture
mehlah
0
60
OpenAPI and AsyncAPI specifications as contracts
mehlah
0
650
Technical Debt
mehlah
1
280
Data informed growth
mehlah
0
220
Serverless Ruby and AWS Lambda
mehlah
0
160
Middleware all the things
mehlah
2
840
Confident refactors
mehlah
1
120
Other Decks in Programming
See All in Programming
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
効率的な開発手段として VRTを活用する
ishkawa
0
160
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1031
460k
Why Our Code Smells
bkeepers
PRO
337
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Making Projects Easy
brettharned
116
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
BBQ
matthewcrist
89
9.7k
Statistics for Hackers
jakevdp
799
220k
The Invisible Side of Design
smashingmag
301
51k
Transcript
How.the.browser renders.a.web.page?¬ @mehlah
Mehdi Lahmam @mehlah Insert you fancy title here
The browser
Browser UI Browser Engine Rendering Engine Networking JavaScript Interpreter UI
Backend Data Persistence The browser's high level structure
WebKit
WebKit components WebCore JS Engine Platform API Webkit Embedding API
WebKit based Browser
Network Graphics Fonts Location Sensors … Storage A/V Platform API
WebKit Port (Safari, Safari iOS, Qt, Playstation, …) API Calls Events
Rendering Engine HTML CSS DOM CSSOM Render Tree Layout Paint
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
HTML CSS DOM CSSOM Render Tree Layout Paint Loading &
Parsing
HTML CSS DOM CSSOM Render Tree Network Loading Loading
Split between WebKit and WebCore WebCore/loader WebCore/platform/network FrameLoaderClient 2 paths:
Frames vs Resources Loading
Mostly FrameLoader Instantiates a DocumentLoader object Policy stage: block pop-ups,
cross-process navigation Provisional phase: download or commit Committed phase: start of parsing Loading Frames
Use DocLoader & Cache DocLoader takes a URL talks to
Cache or Loader returns CachedResource CachedResource Handles callbacks produce objects (file, font, …) Loading Subresources
Render Tree Layout ork Loading Parsing HTML CSS DOM CSSOM
Parsing Parsing
Bytes Characters Tokens Nodes DOM 3C 62 6F 64 79
3E 48 65 6C 6C 6F 2C 20 <body>Hello, <span>world!</span></body> StartTag: body Hello, StartTag: span world! Parsing
Parsing <script> will halt the parser as it can alter
the document sync or defer to the rescue Speculative parsing with PreloadScanner Scripts that might need stylesheets are blocked too.
HTML CSS DOM CSSOM Render Tree Layout Paint The Document
Object Model
<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
<body> <p class=wat>My super markup <div><span>Something great HTMLHtmlElement |-- HTMLHeadElement
`-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text
CSSOM HTML CSS DOM CSSOM Render Tree Layout Paint
Render Tree HTML CSS DOM CSSOM Render Tree Layout Paint
DOM + CSSOM
Render Tree Combines the two object models, style resolution Not
a 1-to-1 mapping of your HTML This is the actual representation of what will show on screen
Render Tree Forest Actually 4 trees : RenderObject tree RenderLayer
tree RenderStyle tree InlineBox tree
RenderObject Tree Owned by DOM tree Only exists for rendered
content Responsible for layout and paint Answers DOM API measurement requests layer tree
RenderObject class RenderObject { virtual void layout(); virtual void paint(PaintInfo);
virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // the computed style RenderLayer* containgLayer; //the containing layer }
|-- HTMLBodyElement |-- HTMLDivElement |-- Text(“foo”) |-- HTMLSpanElement |-- Text(“bar”)
|-- RenderBlock |-- RenderBlock |-- RenderText(“foo”) |-- RenderInline |-- RenderText(“bar”) DOM representation Render objects RenderObject Tree
|-- HTMLBodyElement |-- HTMLDivElement |-- Text(“foo”) |-- HTMLSpanElement |-- Text(“bar”)
|-- HTMLDivElement |-- Text(“foobar”) |-- RenderBlock |-- RenderBlock |-- RenderBlock(anonymous) |-- RenderText(“foo”) |-- RenderInline |-- RenderText(“bar”) |-- RenderBlock |-- RenderText(“foobar”) DOM representation Render objects Anonymous blocks
RenderStyle Tree Contains all computed style values for renderers Owned
by RenderObject tree RenderObjects share RenderStyles RenderStyles share data members
RenderLayer Tree Like a helper class for rendering Used for
<video>, <canvas> with WebGL, positioned, transformed, transparent, masked, clipped, scrollable, or reflected elements Establishes coordinate space and z-ordering At least one per document, sparsely maps to renderers
InlineBox Tree Owned by RenderBlock One RootInlineBox per lineRootInlineBox has
list of InlineBoxes in that line Each InlineBox has a RenderObject A renderer may have many InlineBoxes relies on RenderBlock for layout
|-- RenderBlock |-- RenderText(“foo”) |-- RenderInline(b) |-- RenderText(“bar”) |-- RenderBR
|-- RenderText(“foobar”) Render Tree Line Box Tree |-- RenderBlock |-- RootInlineBox |-- InlineTextBox(“foo”) |-- InlineFlowBox(b) |-- InlineTextBox(“bar”) |-- InlineBox(br) |-- RootInlineBox |-- InlineTextBox(“foobar”) Markup <div>foo<b>bar</b><br>foobar</div>
Layout HTML CSS DOM CSSOM Render Tree Layout Paint Computing
geometric information for each node
Recursive process Traverse Render Tree Nodes position and size Global
and Incremental layouts Layout
https://www.youtube.com/watch?v=ZTnIxIA5KGw Layout in slow motion
HTML CSS DOM CSSOM Render Tree Layout Paint Display content
on the screen Painting
Painting Generally the more time consuming 10 stages (CSS2 specs)
Global and Incremental All painting commands go to GraphicsContext abstraction Compositing
Painting Promote elements that move or fade .moving-element { will-change:
transform; } .moving-element { transform: translateZ(0); } vs
Painting Don’t promote elements without profiling.
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
Performance insights
Layout Invalidation div1.style.marginLeft = “10px”; var h1 = div1.clientHeight; div2.classList.add(“x”);
var h2 = div2.clientHeight; doSomething(h1, h2);
Layout Invalidation div1.style.marginLeft = “10px”; // layout invalidated var h1
= div1.clientHeight; // layout div2.classList.add(“x”); // layout invalidated var h2 = div2.clientHeight; // layout doSomething(h1, h2); div1.style.marginLeft = “10px”; // layout invalidated div2.classList.add(“x”); // layout invalidated var h1 = div1.clientHeight; // layout var h2 = div2.clientHeight; doSomething(h1, h2);
Avoid repaints .button:hover { border: 2px solid red; margin: -2px;
} .button { border: 2px solid transparent; } .button:hover { border-color: red; }
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
/_ __/ /_ ____ _____ / /_______ / / /
__ \/ __ `/ __ \/ //_/ ___/ / / / / / / /_/ / / / / ,< (__ ) /_/ /_/ /_/\__,_/_/ /_/_/|_/____/