How the browser renders a web page (long version)

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

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. /_ __/ /_ ____ _____ / /_______ / / / __ \/ __ `/ __ \/ //_/ ___/ / / / / / / /_/ / / / / ,< (__ ) /_/ /_/ /_/\__,_/_/ /_/_/|_/____/