Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How the browser renders a web page (long version)

Mehdi Lahmam B.
April 22, 2016
Programming
1
290

How the browser renders a web page (long version)

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

Mehdi Lahmam B.

April 22, 2016
Tweet

More Decks by Mehdi Lahmam B.

See All by Mehdi Lahmam B.
PG FDW FTW
mehlah
0
22
Product culture
mehlah
0
22
OpenAPI and AsyncAPI specifications as contracts
mehlah
0
490
Technical Debt
mehlah
1
200
Data informed growth
mehlah
0
81
Serverless Ruby and AWS Lambda
mehlah
0
130
Middleware all the things
mehlah
2
790
Confident refactors
mehlah
1
41
If only I knew this shit in college
mehlah
0
140

Other Decks in Programming

See All in Programming
react-reconcilerでオレオレReact Nativeを作ろう！
kwzr
0
220
PHPからC#のライブラリを呼べるようにしたdotnet_ffiを趣味でつくってみた
pgito
0
130
CI/CD·自動化入門
kuroruri
0
310
Why is building the Ruby environment hard?
hsbt
6
2.5k
iOSDC2022 - iPadOSDC Japan 2022
hcrane
2
410
PWAの今とこれから、iOSでの対応状況 / PWA now and in the future, status of support on iOS
pkino
1
2.9k
セキュリティスキャンツール cdk-nag を使ってみた
kinyok
0
180
20分間で振り返るIn-App Purchaseの歴史
inokinn
3
650
フレームワークの機能を使わずに標準関数使ったら障害起こした話/phpcon-2022
asumikam
0
250
ラスタライザとレイトレのハイブリッドレンダリングエンジン
takayukikiyohara
1
830
SwiftUIとUIKitを仲良くさせる
auramagi
1
620
レガシーなシステムのリファクタリングに取り組んで学んだこと
pbtnhan
0
460

Featured

See All Featured
Making Projects Easy
brettharned
100
4.4k
It's Worth the Effort
3n
173
26k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Designing with Data
zakiwarfel
91
4k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Support Driven Design
roundedbygravity
87
8.7k
Fireside Chat
paigeccino
14
1.5k
Clear Off the Table
cherdarchuk
79
290k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M

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

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