How the browser actually renders a website

We all take for granted that when we push enter in the browsers address bar, magic happens. The browser gets our HTML, that intern requests all the dependencies, insert magic, other things happen and then we have our site rendered. Simple, right, right…

Like many people as I’ve progressed in my career, building for the web, I’ve become curious as to how the browser does what it does. What makes it tick, how it turns a string of HTML into a data structure, how CSS & JavaScript come into play. Things like render tree, style recalculation, paints, reflows, all alien words will start to make sense by the end of this talk.

Suddenly you’ll understand why people recommend you place script tags at the bottom of the document, inlining critical CSS & all sorts of other performance techniques.

Transcript

1. How the browser actually
   renders a website
   Ryan Seddon
   

   View Slide

2. Hallo Berlin!
   

   View Slide

3. @ryanseddon
   Team Lead @ Zendesk
   

   View Slide

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

   View Slide

5. 30,000ft view
   

   View Slide

6. So the browser...
   

   View Slide

7. View Slide

8. View Slide

9. High level flow
   

   View Slide

10. 1. Parsing
    

    View Slide

11. 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.
    

    View Slide

12. Remember xhtml strict
    JavaScript and HTML: Forgiveness by Default
    

    View Slide

13. Valid HTML5
    
    My first website
    Visitor count: 0
    

    View Slide

14. Would output
    
    
    
    
    My first website
    
    
    
    Visitor count: 0
    
    
    
    
    

    View Slide

15. Parsing flow
    

    View Slide

16. Tokenizer
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Reentrant
    Means the parsing process can be interrupted
    

    View Slide

22. Performance insight
    1
    

    View Slide

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

    View Slide

24. Parsing a HTML document
    Visualised
    

    View Slide

25. View Slide

26. CSS parsing
    

    View Slide

27. CSSOM
    image source
    

    View Slide

28. 2. Render/Frame tree
    

    View Slide

29. 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
    

    View Slide

30. View Slide

31. Multiple trees
    4 RenderObjects
    4 RenderStyles
    4 RenderLayers
    4 Line boxes
    

    View Slide

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

    View Slide

33. In the render tree, not in the DOM
    The quick brown fox
    jumps over the lazy dog
    RenderBlock(p) RenderBlock(p)
    |-- RenderText('The quick brown') |-- RootLineBox (line 1)
    |-- RenderInline(strong) | |-- InlineBox (text)
    | `-- RenderText('fox') | `-- InlineBox (strong)
    |-- RenderInline(em) | `-- InlineBox (text)
    | `-- RenderText('jumps') `-- RootLineBox (line 2)
    `-- RenderText('over the lazy dog') |-- InlineBox (em)
    | `--InlineBox (text)
    `-- InlineBox (text)
    

    View Slide

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

    View Slide

35. View Slide

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

    View Slide

37. 3. Layout
    

    View Slide

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

    View Slide

39. 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
    

    View Slide

40. 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
    

    View Slide

41. Performance insight
    2
    

    View Slide

42. 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
    

    View Slide

43. 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';
    

    View Slide

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

    View Slide

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

    View Slide

46. 4. Paint
    

    View Slide

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

    View Slide

48. 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
    

    View Slide

49. 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
    

    View Slide

50. Performance insight
    3
    

    View Slide

51. 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
    

    View Slide

52. View Slide

53. View Slide

54. All of these steps
    Can apply after page load
    

    View Slide

55. 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
    

    View Slide

56. 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
    

    View Slide

57. Go hug a browser engineer
    They have a hard job
    

    View Slide

58. Thanks
    

    View Slide