How the browser actually renders a website

Slide 1

Slide 1 text

How the browser actually renders a website Ryan Seddon

Slide 2

Slide 2 text

Hallo Berlin!

Slide 3

Slide 3 text

@ryanseddon Team Lead @ Zendesk

Slide 4

Slide 4 text

What we'll cover 4 High level view 4 In-depth view 4 Performance insights

Slide 5

Slide 5 text

30,000ft view

Slide 6

Slide 6 text

So the browser...

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

High level flow

Slide 10

Slide 10 text

1. Parsing

Slide 11

Slide 11 text

Parsing HTML 4 HTML is forgiving by nature 4 Parsing isn't straight forward 4 Can be halted 4 Will do speculative parsing 4 It's reentrant.

Slide 12

Slide 12 text

Remember xhtml strict JavaScript and HTML: Forgiveness by Default

Slide 13

Slide 13 text

Valid HTML5

My first website

Visitor count: 0

Slide 14

Slide 14 text

Would output

My first website

Visitor count: 0

Slide 15

Slide 15 text

Parsing flow

Slide 16

Slide 16 text

Tokenizer

Slide 17

Slide 17 text

Parse Tree html |-- head `-- body |-- p.wat | `-- #text `-- div `-- span `-- #text

Slide 18

Slide 18 text

DOM Tree HTMLHtmlElement |-- HTMLHeadElement `-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

Slide 19

Slide 19 text

, <link> & <style> Will halt the parser as a script can alter the document. 4 Network latency 4 link & style could halt JS execution

Slide 20

Slide 20 text

Speculative parsing 4 Will look ahead 4 External images, scripts, css //.... <img src='cat.gif' /> <link href='styles.css' />

Slide 21

Slide 21 text

Reentrant Means the parsing process can be interrupted

Slide 22

Slide 22 text

Performance insight 1

Slide 23

Slide 23 text

at the bottom 4 Parse uninterrupted 4 Faster to render 4 defer and async attributes 4 Trade off

Slide 24

Slide 24 text

Parsing a HTML document Visualised

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

CSS parsing

Slide 27

Slide 27 text

CSSOM image source

Slide 28

Slide 28 text

2. Render/Frame tree

Slide 29

Slide 29 text

DOM + CSSOM 4 Combines the two object models, style resolution 4 This is the actual representation of what will show on screen 4 Not a 1-to-1 mapping of your HTML

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Multiple trees 4 RenderObjects 4 RenderStyles 4 RenderLayers 4 Line boxes

Slide 32

Slide 32 text

Not in the render tree 4 Non-visual elements head, script, title etc 4 Nodes hidden via display: none;

Slide 33

Slide 33 text

In the render tree, not in the DOM

The quick brown fox jumps over the lazy dog

Slide 34

Slide 34 text

DOM Node to RenderObject 4 Visual output 4 Geometric info 4 Can layout and paint 4 Holds style & computed metrics

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Calculating visual properties 4 Combines all styles 4 defaults, external, style elements & inline 4 Complexity around matching rules for each element 4 Style computation

Slide 37

Slide 37 text

3. Layout

Slide 38

Slide 38 text

Recursive process 4 Traverse render tree 4 Nodes position and size 4 Layout its children

Slide 39

Slide 39 text

Will batch layouts 4 Incremental layouts 4 The browser will intelligently batch changes 4 Render tree items will flag themselves as dirty 4 The batch will traverse the tree and find all dirty trees 4 Asynchronous

Slide 40

Slide 40 text

Immediate layout 4 Doing a font-size change will relayout the entire document 4 Same with browser resize 4 Accessing certain properties via JavaScript e.g. node.offsetHeight

Slide 41

Slide 41 text

Performance insight 2

Slide 42

Slide 42 text

Take note from the browser and batch 4 Act like the browser and batch your DOM changes 4 Do all your reads in one pass 4 Followed by writes

Slide 43

Slide 43 text

Bad Here we read then write, read then write. var divHeight = div.clientWidth / 1.7; div.style.height = divHeight + 'px'; var div2Height = div2.clientWidth / 1.7; div2.style.height = div2Height + 'px';

Slide 44

Slide 44 text

Good var divHeight = div.clientWidth / 1.7; var div2Height = div2.clientWidth / 1.7; div.style.height = divHeight + 'px'; div2.style.height = div2Height + 'px';

Slide 45

Slide 45 text

Real world 4 FastDom, Preventing layout thrashing 4 Most modern JS frameworks do this internally

Slide 46

Slide 46 text

4. Paint

Slide 47

Slide 47 text

Paint setup 4 Will take the layed out render trees 4 Creates layers 4 Incremental process 4 Builds up over 12 phases

Slide 48

Slide 48 text

RenderLayers 4 Creates layers from RenderObjects 4 Position nodes, transparency, overflow, canvas, video etc 4 Many-to-1 relationship a RenderLayer could contain multiple RenderObjects

Slide 49

Slide 49 text

Painting 4 Produces a bitmap from each layer 4 Bitmap is uploaded to the GPU as a texture 4 Composites the textures into a final image to render to the screen

Slide 50

Slide 50 text

Performance insight 3

Slide 51

Slide 51 text

inline critical CSS 4 The most important bits of your site/app 4 Speeds up first paint times 4 External js and css can block 4 Delta last bitmap

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

All of these steps Can apply after page load

Slide 55

Slide 55 text

Recap 4 Parsing --> DOM Tree 4 DOM Tree --> Render Tree 4 Is actually 4 trees 4 Layout computes where a Node will be on the screen 4 Painting computes bitmaps and composites to screen

Slide 56

Slide 56 text

The browser is complicated 4 http://www.webkit.org/projects/layout/index.html 4 http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html 4 http://www.html5rocks.com/en/tutorials/internals/ howbrowserswork/ 4 https://www.youtube.com/watch?gl=US&v=RVnARGhhs9w 4 https://www.chromium.org/developers/design-documents/gpu- accelerated-compositing-in-chrome 4 https://www.youtube.com/watch?v=Lpk1dYdo62o