How the browser renders a web page (long version)

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

Mehdi Lahmam @mehlah Insert you fancy title here

The browser

Browser UI Browser Engine Rendering Engine Networking JavaScript Interpreter UI
Backend Data Persistence The browser's high level structure

WebKit

WebKit components WebCore JS Engine Platform API Webkit Embedding API
WebKit based Browser

Network Graphics Fonts Location Sensors … Storage A/V Platform API
WebKit Port (Safari, Safari iOS, Qt, Playstation, …) API Calls Events

Rendering Engine HTML CSS DOM CSSOM Render Tree Layout Paint

HTML CSS DOM CSSOM Render Tree Layout Paint Rendering Engine

HTML CSS DOM CSSOM Render Tree Layout Paint Loading &
Parsing

HTML CSS DOM CSSOM Render Tree Network Loading Loading

Split between WebKit and WebCore WebCore/loader WebCore/platform/network FrameLoaderClient 2 paths:
Frames vs Resources Loading

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

Use DocLoader & Cache DocLoader takes a URL talks to
Cache or Loader returns CachedResource CachedResource Handles callbacks produce objects (file, font, …) Loading Subresources

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

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

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.

HTML CSS DOM CSSOM Render Tree Layout Paint The Document
Object Model

<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

<body> <p class=wat>My super markup <div><span>Something great HTMLHtmlElement |-- HTMLHeadElement
`-- HTMLBodyElement |-- HTMLParagraphElement | `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

CSSOM HTML CSS DOM CSSOM Render Tree Layout Paint

Render Tree HTML CSS DOM CSSOM Render Tree Layout Paint
DOM + CSSOM

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

Render Tree Forest Actually 4 trees : RenderObject tree RenderLayer
tree RenderStyle tree InlineBox tree

RenderObject Tree Owned by DOM tree Only exists for rendered
content Responsible for layout and paint Answers DOM API measurement requests layer tree

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 }

RenderStyle Tree Contains all computed style values for renderers Owned
by RenderObject tree RenderObjects share RenderStyles RenderStyles share data members

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

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

Layout HTML CSS DOM CSSOM Render Tree Layout Paint Computing
geometric information for each node

Recursive process Traverse Render Tree Nodes position and size Global
and Incremental layouts Layout

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

HTML CSS DOM CSSOM Render Tree Layout Paint Display content
on the screen Painting

Painting Generally the more time consuming 10 stages (CSS2 specs)
Global and Incremental All painting commands go to GraphicsContext abstraction Compositing

Painting Promote elements that move or fade .moving-element { will-change:
transform; } .moving-element { transform: translateZ(0); } vs

Painting Don’t promote elements without profiling.

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

Performance insights

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

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

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

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

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

How the browser renders a web page (long version)

How the browser renders a web page (long version)

More Decks by Mehdi Lahmam B.

Other Decks in Programming

Featured

Transcript