Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

The browser

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Bytes ! characters ! tokens ! nodes ! object model

Slide 13

Slide 13 text

My super markup

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

Slide 14

Slide 14 text

My super markup

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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