Speaker Deck
Sign in
Sign up
for free
How the browser renders a web page (long version)
Mehdi Lahmam B.
April 22, 2016
Programming
1
260
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
Want more?
mehlah
0
340
mehlah
1
120
mehlah
0
100
iamctodd
2
530
reverentgeek
14
880
rmw
6
480
skipperchong
0
300
carmenhchung
8
620
keathley
9
330
productmarketing
3
360
clairelew
5
910
thoeni
1
230
Transcript
1
.
How.the.browser renders.a.web.page?¬ @mehlah
2
.
Mehdi Lahmam @mehlah Insert you fancy title here
3
.
The browser
4
.
Browser UI Browser Engine Rendering Engine Networking JavaScript Interpreter UI
Backend Data Persistence The browser's high level structure
5
.
WebKit
6
.
WebKit components WebCore JS Engine Platform API Webkit Embedding API
WebKit based Browser
7
.
Network Graphics Fonts Location Sensors … Storage A/V Platform API
WebKit Port (Safari, Safari iOS, Qt, Playstation, …) API Calls Events
8
.
Rendering Engine HTML CSS DOM CSSOM Render Tree Layout Paint
9
.
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
10
.
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
11
.
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
12
.
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
13
.
HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine
14
.
HTML CSS DOM CSSOM Render Tree Layout Paint Loading &
Parsing
15
.
HTML CSS DOM CSSOM Render Tree Network Loading Loading
16
.
Split between WebKit and WebCore WebCore/loader WebCore/platform/network FrameLoaderClient 2 paths:
Frames vs Resources Loading
17
.
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
18
.
Use DocLoader & Cache DocLoader takes a URL talks to
Cache or Loader returns CachedResource CachedResource Handles callbacks produce objects (file, font, …) Loading Subresources
19
.
Render Tree Layout ork Loading Parsing HTML CSS DOM CSSOM
Parsing Parsing
20
.
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
21
.
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.
22
.
HTML CSS DOM CSSOM Render Tree Layout Paint The Document
Object Model
23
.
<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
24
.
<body> <p class=wat>My super markup <div><span>Something great HTMLHtmlElement |-- HTMLHeadElement
`-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text
25
.
CSSOM HTML CSS DOM CSSOM Render Tree Layout Paint
26
.
Render Tree HTML CSS DOM CSSOM Render Tree Layout Paint
DOM + CSSOM
27
.
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
28
.
Render Tree Forest Actually 4 trees : RenderObject tree RenderLayer
tree RenderStyle tree InlineBox tree
29
.
RenderObject Tree Owned by DOM tree Only exists for rendered
content Responsible for layout and paint Answers DOM API measurement requests layer tree
30
.
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 }
31
.
|-- HTMLBodyElement |-- HTMLDivElement |-- Text(“foo”) |-- HTMLSpanElement |-- Text(“bar”)
|-- RenderBlock |-- RenderBlock |-- RenderText(“foo”) |-- RenderInline |-- RenderText(“bar”) DOM representation Render objects RenderObject Tree
32
.
|-- 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
33
.
RenderStyle Tree Contains all computed style values for renderers Owned
by RenderObject tree RenderObjects share RenderStyles RenderStyles share data members
34
.
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
35
.
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
36
.
|-- 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>
37
.
Layout HTML CSS DOM CSSOM Render Tree Layout Paint Computing
geometric information for each node
38
.
Recursive process Traverse Render Tree Nodes position and size Global
and Incremental layouts Layout
39
.
https://www.youtube.com/watch?v=ZTnIxIA5KGw Layout in slow motion
40
.
HTML CSS DOM CSSOM Render Tree Layout Paint Display content
on the screen Painting
41
.
Painting Generally the more time consuming 10 stages (CSS2 specs)
Global and Incremental All painting commands go to GraphicsContext abstraction Compositing
42
.
Painting Promote elements that move or fade .moving-element { will-change:
transform; } .moving-element { transform: translateZ(0); } vs
43
.
Painting Don’t promote elements without profiling.
44
.
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
45
.
Performance insights
46
.
Layout Invalidation div1.style.marginLeft = “10px”; var h1 = div1.clientHeight; div2.classList.add(“x”);
var h2 = div2.clientHeight; doSomething(h1, h2);
47
.
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);
48
.
Avoid repaints .button:hover { border: 2px solid red; margin: -2px;
} .button { border: 2px solid transparent; } .button:hover { border-color: red; }
49
.
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
50
.
/_ __/ /_ ____ _____ / /_______ / / /
__ \/ __ `/ __ \/ //_/ ___/ / / / / / / /_/ / / / / ,< (__ ) /_/ /_/ /_/\__,_/_/ /_/_/|_/____/
Mehdi Lahmam B.
mehlah
iamctodd
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
