Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How the browser actually renders a website

ryanseddon
September 25, 2015

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.

ryanseddon

September 25, 2015
Tweet

More Decks by ryanseddon

Other Decks in Programming

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