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

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