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

How the browser actually renders a website

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.


September 25, 2015

More Decks by ryanseddon

Other Decks in Programming


  1. 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.
  2. Would output <html> <head></head> <body> <p class="wat"> My first website

    </p> <div> <span> Visitor count: 0 </span> </div> </body> </html>
  3. Parse Tree html |-- head `-- body |-- p.wat |

    `-- #text `-- div `-- span `-- #text
  4. <script>, <link> & <style> Will halt the parser as a

    script can alter the document. 4 Network latency 4 link & style could halt JS execution
  5. Speculative parsing 4 Will look ahead 4 External images, scripts,

    css <script src='script.js'> //.... <img src='cat.gif' /> <link href='styles.css' />
  6. <script /> at the bottom 4 Parse uninterrupted 4 Faster

    to render 4 defer and async attributes 4 Trade off
  7. 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
  8. Not in the render tree 4 Non-visual elements head, script,

    title etc 4 Nodes hidden via display: none;
  9. In the render tree, not in the DOM <p>The quick

    brown <strong>fox</strong> <em>jumps<em> over the lazy dog</p> 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)
  10. DOM Node to RenderObject 4 Visual output 4 Geometric info

    4 Can layout and paint 4 Holds style & computed metrics
  11. Calculating visual properties 4 Combines all styles 4 defaults, external,

    style elements & inline 4 Complexity around matching rules for each element 4 Style computation
  12. 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
  13. 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
  14. 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
  15. 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';
  16. Good var divHeight = div.clientWidth / 1.7; var div2Height =

    div2.clientWidth / 1.7; div.style.height = divHeight + 'px'; div2.style.height = div2Height + 'px';
  17. Paint setup 4 Will take the layed out render trees

    4 Creates layers 4 Incremental process 4 Builds up over 12 phases
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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