How the browser renders a web page (long version)

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

Transcript

  1. 4.

    Browser UI Browser Engine Rendering Engine Networking JavaScript Interpreter UI

    Backend Data Persistence The browser's high level structure
  2. 5.
  3. 7.

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

    WebKit Port (Safari, Safari iOS, Qt, Playstation, …) API Calls Events
  4. 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
  5. 18.

    Use DocLoader & Cache DocLoader takes a URL talks to

    Cache or Loader returns CachedResource CachedResource Handles callbacks produce objects (file, font, …) Loading Subresources
  6. 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
  7. 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.
  8. 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
  9. 24.

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

    `-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text
  10. 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
  11. 29.

    RenderObject Tree Owned by DOM tree Only exists for rendered

    content Responsible for layout and paint Answers DOM API measurement requests layer tree
  12. 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 }
  13. 31.

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

    |-- RenderBlock |-- RenderBlock |-- RenderText(“foo”) |-- RenderInline |-- RenderText(“bar”) DOM representation Render objects RenderObject Tree
  14. 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
  15. 33.

    RenderStyle Tree Contains all computed style values for renderers Owned

    by RenderObject tree RenderObjects share RenderStyles RenderStyles share data members
  16. 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
  17. 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
  18. 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>
  19. 37.
  20. 41.

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

    Global and Incremental All painting commands go to GraphicsContext abstraction Compositing
  21. 42.

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

    transform; } .moving-element { transform: translateZ(0); } vs
  22. 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
  23. 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);
  24. 48.

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

    } .button { border: 2px solid transparent; } .button:hover { border-color: red; }
  25. 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
  26. 50.

    /_ __/ /_ ____ _____ / /_______ / / /

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