$30 off During Our Annual Pro Sale. View Details »

How the browser renders a web page

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

Mehdi Lahmam B.

December 08, 2015
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
    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