How the browser renders a web page (long version)

Slides for my talk at Mix-It conference https://www.mix-it.fr/session/2712/

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