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
8
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
410
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
160
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
33
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
110
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
2
750
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
35
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
0
120
C74bdcd3fa7c3d3f23290f46430b1463?s=48 mehlah
1
360

Other Decks in Programming

See All in Programming
E4e01fb8b7105e61e3876224139503ab?s=48 niw
2
350
C20b9829daddbee16e359b0a750660a5?s=48 thomasvitale
0
180
9e68acadfe81c2634fae5b8c891f6814?s=48 tamaudon
1
150
Dcc589548f0372645aaeb95bda8e22c2?s=48 cpp
0
140
9bda8755a689204677a198ee85c0eb07?s=48 banjun
PRO
0
120
B32c18d03687577950da29542d0a9180?s=48 kurumai
1
660
042b7c0e45c53de46667f07de2fb2614?s=48 vixentael
0
390
D4b671ba3e441fa2aad85d7508ab67a2?s=48 treastrain
4
370
028088964f255d677d471558da865b72?s=48 satoshin
2
110
3c031541ed3d92869414857dfef853de?s=48 koher
6
360
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
0
170
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
3
2.4k

Featured

See All Featured
Ba530e786553390f3fb271848485681c?s=48 3n
169
23k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
593
210k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
190
14k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
8.1k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
30
1.7k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k

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. /_ __/ /_ ____ _____ / /_______ / / /

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