How the browser renders a web page

A short introduction to the rendering process of a web page with a profiling demo using Chrome DevTools

Transcript

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

   View Slide

2. Mehdi Lahmam
   @mehlah
   Product designer and secretary-at-large
   at Craftsmen
   

   View Slide

3. The browser
   

   View Slide

4. The browser's high level structure
   +-------------------------------------------+ +-------+
   | | | |
   | User Interface | | |
   | | | |
   +---------------------+--------------------++ | |
   | | | |
   | | | |
   +------------------v------------------+ | | |
   | | | | |
   | Browser Engine +-------> |
   | | | | |
   +------------------+------------------+ | | |
   | | | |
   | | | |
   +------------------v------------------+ | | |
   | | | | |
   | Rendering Engine | | | |
   | | | | |
   ++-----------------+-----------------++ | +-------+
   | | | |
   +----------------v-+ +----------v-------+ +----v--v----------+
   | | | | | |
   | Networking | | JS Interpreter | | UI Backend |
   | | | | | |
   +------------------+ +------------------+ +------------------+
   Data Persistence
   

   View Slide

5. Rendering Engine
   +-----------+ +-----------+
   | | | |
   | HTML +------> DOM +--+
   | | | | | +-----------+ +-----------+ +----------+
   +-----------+ +-----------+ +----> | | | | |
   | Render +------> Layout +------> Paint |
   +-----------+ +-----------+ +----> Tree | | | | |
   | | | | | +-----------+ +-----------+ +----------+
   | CSS +------> CSSOM +--+
   | | | |
   +-----------+ +-----------+
   

   View Slide

6. Rendering Engine
   +-----------+ +-----------+
   | | | |
   | HTML +------> DOM +--+
   | | | | | +-----------+ +-----------+ +----------+
   +-----------+ +-----------+ +----> | | | | |
   | Render +------> Layout +------> Paint |
   +-----------+ +-----------+ +----> Tree | | | | |
   | | | | | +-----------+ +-----------+ +----------+
   | CSS +------> CSSOM +--+
   | | | |
   +-----------+ +-----------+
   

   View Slide

7. Rendering Engine
   +-----------+ +-----------+
   | | | |
   | HTML +------> DOM +--+
   | | | | | +-----------+ +-----------+ +----------+
   +-----------+ +-----------+ +----> | | | | |
   | Render +------> Layout +------> Paint |
   +-----------+ +-----------+ +----> Tree | | | | |
   | | | | | +-----------+ +-----------+ +----------+
   | CSS +------> CSSOM +--+
   | | | |
   +-----------+ +-----------+
   

   View Slide

8. Rendering Engine
   +-----------+ +-----------+
   | | | |
   | HTML +------> DOM +--+
   | | | | | +-----------+ +-----------+ +----------+
   +-----------+ +-----------+ +----> | | | | |
   | Render +------> Layout +------> Paint |
   +-----------+ +-----------+ +----> Tree | | | | |
   | | | | | +-----------+ +-----------+ +----------+
   | CSS +------> CSSOM +--+
   | | | |
   +-----------+ +-----------+
   

   View Slide

9. Rendering Engine
   +-----------+ +-----------+
   | | | |
   | HTML +------> DOM +--+
   | | | | | +-----------+ +-----------+ +----------+
   +-----------+ +-----------+ +----> | | | | |
   | Render +------> Layout +------> Paint |
   +-----------+ +-----------+ +----> Tree | | | | |
   | | | | | +-----------+ +-----------+ +----------+
   | CSS +------> CSSOM +--+
   | | | |
   +-----------+ +-----------+
   

   View Slide

10. Rendering Engine
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

11. The Document Object Model
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

12. Bytes ! characters ! tokens ! nodes ! object model
    

    View Slide

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

    View Slide

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

    View Slide

15. CSSOM
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

16. Render/Frame Tree
    DOM + CSSOM
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

17. Render/Frame Tree
    Combines the two object models, style resolution
    This is the actual representation of what will
    show on screen
    Not a 1-to-1 mapping of your HTML
    

    View Slide

18. Layout
    Computing geometric information
    for each node
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

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

    View Slide

20. Display content on the screen
    Painting
    +-----------+ +-----------+
    | | | |
    | HTML +------> DOM +--+
    | | | | | +-----------+ +-----------+ +----------+
    +-----------+ +-----------+ +----> | | | | |
    | Render +------> Layout +------> Paint |
    +-----------+ +-----------+ +----> Tree | | | | |
    | | | | | +-----------+ +-----------+ +----------+
    | CSS +------> CSSOM +--+
    | | | |
    +-----------+ +-----------+
    

    View Slide

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

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

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

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

    View Slide

25. _______ ______
    ___ |__________/_/____________
    __ /| |__ __ \ _ \_ ___/ __ \
    _ ___ |_ /_/ / __/ / / /_/ /
    /_/ |_| .___/\___//_/ \____/
    /_/
    

    View Slide

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

    View Slide

27. Layout Invalidation
    .button:hover {
    border: 2px solid red;
    margin: -2px;
    }
    .button {
    border: 2px solid transparent;
    }
    .button:hover {
    border-color: red;
    }
    

    View Slide