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

How the browser renders a web page (long version)

C74bdcd3fa7c3d3f23290f46430b1463?s=47 Mehdi Lahmam B.
April 22, 2016
Programming
1
270

How the browser renders a web page (long version)

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

C74bdcd3fa7c3d3f23290f46430b1463?s=128

Mehdi Lahmam B.

April 22, 2016
Tweet

More Decks by Mehdi Lahmam B.

See All by Mehdi Lahmam B.
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
400
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
140
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
15
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
110
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
2
730
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
35
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
120
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
350
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
51

Other Decks in Programming

See All in Programming
E505897a79eede1a676f92740261e8f8?s=48 kubode
2
190
3138f3848e96b7dfc3dba2113bcb43e7?s=48 tmyk110
1
160
C766fe58109bc3750d333f4835ba43c2?s=48 emberconf
0
140
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
1
530
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
1
170
B793da271a45d149b52f507bca9f137c?s=48 77web
2
2.3k
88ad4f75d7c84fcf560bb6205c52e8c1?s=48 dnskimo
8
1.5k
Ec9465c5a5f2ea26a80db56f9d2f99b0?s=48 drumato
1
230
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
220
8673a339e4002704b42bc66c43c65445?s=48 scrpgil
0
100
81689b093f75cf3f383e581ca57188df?s=48 minecr
0
110
5155c9bc5b30d9e2a8fd677695887861?s=48 kaonash
2
1.9k

Featured

See All Featured
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
880k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
21
1.3k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
221
47k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
270k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
312
21k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
540
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
78b475797a14c84799063c7cd073962f?s=48 holman
288
130k

Transcript

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

  2. Mehdi Lahmam @mehlah Insert you fancy title here

  3. The browser

  4. Browser UI Browser Engine Rendering Engine Networking JavaScript Interpreter UI

    Backend Data Persistence The browser's high level structure

  5. WebKit

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

    WebKit based Browser

  7. Network Graphics Fonts Location Sensors … Storage A/V Platform API

    WebKit Port (Safari, Safari iOS, Qt, Playstation, …) API Calls Events

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

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

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

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

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

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

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

    Parsing

  15. HTML CSS DOM CSSOM Render Tree Network Loading Loading

  16. Split between WebKit and WebCore WebCore/loader WebCore/platform/network FrameLoaderClient 2 paths:

    Frames vs Resources Loading

  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

  18. Use DocLoader & Cache DocLoader takes a URL talks to

    Cache or Loader returns CachedResource CachedResource Handles callbacks produce objects (file, font, …) Loading Subresources

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

    Parsing Parsing

  20. Bytes Characters Tokens Nodes DOM 3C 62 6F 64 79

    3E 48 65 6C 6C 6F 2C 20 <body>Hello, <span>world!</span></body> StartTag: body Hello, StartTag: span world! Parsing

  21. Parsing <script> will halt the parser as it can alter

    the document sync or defer to the rescue Speculative parsing with PreloadScanner Scripts that might need stylesheets are blocked too.

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

    Object Model

  23. <html> <head></head> <body> <p class="wat"> My super markup </p> <div>

    <span> Something great </span> </div> </body> </html> HTMLHtmlElement |-- HTMLHeadElement `-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

  24. <body> <p class=wat>My super markup <div><span>Something great HTMLHtmlElement |-- HTMLHeadElement

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

  25. CSSOM HTML CSS DOM CSSOM Render Tree Layout Paint

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

    DOM + CSSOM

  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

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

    tree RenderStyle tree InlineBox tree

  29. RenderObject Tree Owned by DOM tree Only exists for rendered

    content Responsible for layout and paint Answers DOM API measurement requests layer tree

  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 }

  31. |-- HTMLBodyElement |-- HTMLDivElement |-- Text(“foo”) |-- HTMLSpanElement |-- Text(“bar”)

    |-- RenderBlock |-- RenderBlock |-- RenderText(“foo”) |-- RenderInline |-- RenderText(“bar”) DOM representation Render objects RenderObject Tree

  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

  33. RenderStyle Tree Contains all computed style values for renderers Owned

    by RenderObject tree RenderObjects share RenderStyles RenderStyles share data members

  34. RenderLayer Tree Like a helper class for rendering Used for

    <video>, <canvas> 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

  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

  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 <div>foo<b>bar</b><br>foobar</div>

  37. Layout HTML CSS DOM CSSOM Render Tree Layout Paint Computing

    geometric information for each node

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

    and Incremental layouts Layout

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

  40. HTML CSS DOM CSSOM Render Tree Layout Paint Display content

    on the screen Painting

  41. Painting Generally the more time consuming 10 stages (CSS2 specs)

    Global and Incremental All painting commands go to GraphicsContext abstraction Compositing

  42. Painting Promote elements that move or fade .moving-element { will-change:

    transform; } .moving-element { transform: translateZ(0); } vs

  43. Painting Don’t promote elements without profiling.

  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

  45. Performance insights

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

    var h2 = div2.clientHeight; doSomething(h1, h2);

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

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

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

  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

  50. /_ __/ /_ ____ _____ / /_______ / / /

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