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

How the browser renders a web page (long version)

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

More Decks by Mehdi Lahmam B.

Other Decks in Programming

Transcript

  1. How.the.browser
    renders.a.web.page?¬
    @mehlah

    View Slide

  2. Mehdi Lahmam
    @mehlah
    Insert you fancy title here

    View Slide

  3. The browser

    View Slide

  4. Browser UI
    Browser Engine
    Rendering Engine
    Networking
    JavaScript
    Interpreter
    UI Backend
    Data Persistence
    The browser's high level structure

    View Slide

  5. WebKit

    View Slide

  6. WebKit components
    WebCore JS Engine
    Platform API
    Webkit Embedding API
    WebKit based Browser

    View Slide

  7. Network Graphics Fonts
    Location Sensors …
    Storage
    A/V
    Platform API
    WebKit Port (Safari, Safari iOS, Qt, Playstation, …)
    API Calls
    Events

    View Slide

  8. Rendering Engine
    HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint

    View Slide

  9. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Rendering Engine

    View Slide

  10. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Rendering Engine

    View Slide

  11. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Rendering Engine

    View Slide

  12. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Rendering Engine

    View Slide

  13. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Rendering Engine

    View Slide

  14. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Loading & Parsing

    View Slide

  15. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Network
    Loading
    Loading

    View Slide

  16. Split between WebKit and WebCore
    WebCore/loader
    WebCore/platform/network
    FrameLoaderClient
    2 paths: Frames vs Resources
    Loading

    View Slide

  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

    View Slide

  18. Use DocLoader & Cache
    DocLoader
    takes a URL
    talks to Cache or Loader
    returns CachedResource
    CachedResource
    Handles callbacks
    produce objects (file, font, …)
    Loading Subresources

    View Slide

  19. Render
    Tree
    Layout
    ork
    Loading
    Parsing
    HTML
    CSS
    DOM
    CSSOM
    Parsing
    Parsing

    View Slide

  20. Bytes
    Characters
    Tokens
    Nodes
    DOM
    3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20
    Hello, world!
    StartTag: body Hello, StartTag: span world!
    Parsing

    View Slide

  21. Parsing
    will halt the parser as it can alter the<br/>document<br/>sync or defer to the rescue<br/>Speculative parsing with PreloadScanner<br/>Scripts that might need stylesheets are blocked too.<br/>

    View Slide

  22. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    The Document Object Model

    View Slide





  23. My super markup



    Something great




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

    View Slide


  24. My super markup
    Something great
    HTMLHtmlElement
    |-- HTMLHeadElement
    `-- HTMLBodyElement
    |-- HTMLParagraphElement
    | `-- Text
    `-- HTMLDivElement
    `-- HTMLSpanElement
    `-- Text

    View Slide

  25. CSSOM
    HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint

    View Slide

  26. Render Tree
    HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    DOM + CSSOM

    View Slide

  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

    View Slide

  28. Render Tree Forest
    Actually 4 trees :
    RenderObject tree
    RenderLayer tree
    RenderStyle tree
    InlineBox tree

    View Slide

  29. RenderObject Tree
    Owned by DOM tree
    Only exists for rendered content
    Responsible for layout and paint
    Answers DOM API measurement requests layer tree

    View Slide

  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
    }

    View Slide

  31. |-- HTMLBodyElement
    |-- HTMLDivElement
    |-- Text(“foo”)
    |-- HTMLSpanElement
    |-- Text(“bar”)
    |-- RenderBlock
    |-- RenderBlock
    |-- RenderText(“foo”)
    |-- RenderInline
    |-- RenderText(“bar”)
    DOM representation Render objects
    RenderObject Tree

    View Slide

  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

    View Slide

  33. RenderStyle Tree
    Contains all computed style values for renderers
    Owned by RenderObject tree
    RenderObjects share RenderStyles
    RenderStyles share data members

    View Slide

  34. RenderLayer Tree
    Like a helper class for rendering
    Used for , 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

    View Slide

  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

    View Slide

  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
    foobar
    foobar

    View Slide

  37. Layout
    HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Computing geometric information
    for each node

    View Slide

  38. Recursive process
    Traverse Render Tree
    Nodes position and size
    Global and Incremental layouts
    Layout

    View Slide

  39. https://www.youtube.com/watch?v=ZTnIxIA5KGw
    Layout in slow motion

    View Slide

  40. HTML
    CSS
    DOM
    CSSOM
    Render
    Tree
    Layout Paint
    Display content on the screen
    Painting

    View Slide

  41. Painting
    Generally the more time consuming
    10 stages (CSS2 specs)
    Global and Incremental
    All painting commands go to GraphicsContext abstraction
    Compositing

    View Slide

  42. Painting
    Promote elements that move or fade
    .moving-element {
    will-change: transform;
    }
    .moving-element {
    transform: translateZ(0);
    }
    vs

    View Slide

  43. Painting
    Don’t promote elements without profiling.

    View Slide

  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

    View Slide

  45. Performance insights

    View Slide

  46. Layout Invalidation
    div1.style.marginLeft = “10px”;
    var h1 = div1.clientHeight;
    div2.classList.add(“x”);
    var h2 = div2.clientHeight;
    doSomething(h1, h2);

    View Slide

  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);

    View Slide

  48. Avoid repaints
    .button:hover {
    border: 2px solid red;
    margin: -2px;
    }
    .button {
    border: 2px solid transparent;
    }
    .button:hover {
    border-color: red;
    }

    View Slide

  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

    View Slide

  50. /_ __/ /_ ____ _____ / /_______
    / / / __ \/ __ `/ __ \/ //_/ ___/
    / / / / / / /_/ / / / / ,< (__ )
    /_/ /_/ /_/\__,_/_/ /_/_/|_/____/

    View Slide