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

How the browser actually renders a website

ryanseddon
September 25, 2015
Programming
20
18k

How the browser actually renders a website

We all take for granted that when we push enter in the browsers address bar, magic happens. The browser gets our HTML, that intern requests all the dependencies, insert magic, other things happen and then we have our site rendered. Simple, right, right…

Like many people as I’ve progressed in my career, building for the web, I’ve become curious as to how the browser does what it does. What makes it tick, how it turns a string of HTML into a data structure, how CSS & JavaScript come into play. Things like render tree, style recalculation, paints, reflows, all alien words will start to make sense by the end of this talk.

Suddenly you’ll understand why people recommend you place script tags at the bottom of the document, inlining critical CSS & all sorts of other performance techniques.

ryanseddon

September 25, 2015
Tweet

More Decks by ryanseddon

See All by ryanseddon
Houdini
ryanseddon
1
460
Performance beyond the page load
ryanseddon
3
590
Remote debugging landscape
ryanseddon
1
900

Other Decks in Programming

See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7k
Оптимизируем производительность блока Казначейство
lamodatech
0
750
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
590
Go の GC の不得意な 部分を克服したい
taiyow
3
870
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
2
470
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
280
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

eiganken
1
190
nekko cloudにおけるProxmox VE利用事例
irumaru
3
480
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
300
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
400

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
190
For a Future-Friendly Web
brad_frost
175
9.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
GitHub's CSS Performance
jonrohan
1031
460k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Typedesign – Prime Four
hannesfritz
40
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
96
17k
KATA
mclloyd
29
14k

Transcript

  1. How the browser actually renders a website Ryan Seddon

  2. Hallo Berlin!

  3. @ryanseddon Team Lead @ Zendesk

  4. What we'll cover 4 High level view 4 In-depth view

    4 Performance insights

  5. 30,000ft view

  6. So the browser...

  7. None
  8. None

  9. High level flow

  10. 1. Parsing

  11. Parsing HTML 4 HTML is forgiving by nature 4 Parsing

    isn't straight forward 4 Can be halted 4 Will do speculative parsing 4 It's reentrant.

  12. Remember xhtml strict JavaScript and HTML: Forgiveness by Default

  13. Valid HTML5 <body> <p class=wat>My first website <div><span>Visitor count: 0

  14. Would output <html> <head></head> <body> <p class="wat"> My first website

    </p> <div> <span> Visitor count: 0 </span> </div> </body> </html>

  15. Parsing flow

  16. Tokenizer

  17. Parse Tree html |-- head `-- body |-- p.wat |

    `-- #text `-- div `-- span `-- #text

  18. DOM Tree HTMLHtmlElement |-- HTMLHeadElement `-- HTMLBodyElement |-- HTMLParagraphElement |

    `-- Text `-- HTMLDivElement `-- HTMLSpanElement `-- Text

  19. <script>, <link> & <style> Will halt the parser as a

    script can alter the document. 4 Network latency 4 link & style could halt JS execution

  20. Speculative parsing 4 Will look ahead 4 External images, scripts,

    css <script src='script.js'> //.... <img src='cat.gif' /> <link href='styles.css' />

  21. Reentrant Means the parsing process can be interrupted

  22. Performance insight 1

  23. <script /> at the bottom 4 Parse uninterrupted 4 Faster

    to render 4 defer and async attributes 4 Trade off

  24. Parsing a HTML document Visualised

  25. None

  26. CSS parsing

  27. CSSOM image source

  28. 2. Render/Frame tree

  29. DOM + CSSOM 4 Combines the two object models, style

    resolution 4 This is the actual representation of what will show on screen 4 Not a 1-to-1 mapping of your HTML
  30. None

  31. Multiple trees 4 RenderObjects 4 RenderStyles 4 RenderLayers 4 Line

    boxes

  32. Not in the render tree 4 Non-visual elements head, script,

    title etc 4 Nodes hidden via display: none;

  33. In the render tree, not in the DOM <p>The quick

    brown <strong>fox</strong> <em>jumps<em> over the lazy dog</p> RenderBlock(p) RenderBlock(p) |-- RenderText('The quick brown') |-- RootLineBox (line 1) |-- RenderInline(strong) | |-- InlineBox (text) | `-- RenderText('fox') | `-- InlineBox (strong) |-- RenderInline(em) | `-- InlineBox (text) | `-- RenderText('jumps') `-- RootLineBox (line 2) `-- RenderText('over the lazy dog') |-- InlineBox (em) | `--InlineBox (text) `-- InlineBox (text)

  34. DOM Node to RenderObject 4 Visual output 4 Geometric info

    4 Can layout and paint 4 Holds style & computed metrics
  35. None

  36. Calculating visual properties 4 Combines all styles 4 defaults, external,

    style elements & inline 4 Complexity around matching rules for each element 4 Style computation

  37. 3. Layout

  38. Recursive process 4 Traverse render tree 4 Nodes position and

    size 4 Layout its children

  39. Will batch layouts 4 Incremental layouts 4 The browser will

    intelligently batch changes 4 Render tree items will flag themselves as dirty 4 The batch will traverse the tree and find all dirty trees 4 Asynchronous

  40. Immediate layout 4 Doing a font-size change will relayout the

    entire document 4 Same with browser resize 4 Accessing certain properties via JavaScript e.g. node.offsetHeight

  41. Performance insight 2

  42. Take note from the browser and batch 4 Act like

    the browser and batch your DOM changes 4 Do all your reads in one pass 4 Followed by writes

  43. Bad Here we read then write, read then write. var

    divHeight = div.clientWidth / 1.7; div.style.height = divHeight + 'px'; var div2Height = div2.clientWidth / 1.7; div2.style.height = div2Height + 'px';

  44. Good var divHeight = div.clientWidth / 1.7; var div2Height =

    div2.clientWidth / 1.7; div.style.height = divHeight + 'px'; div2.style.height = div2Height + 'px';

  45. Real world 4 FastDom, Preventing layout thrashing 4 Most modern

    JS frameworks do this internally

  46. 4. Paint

  47. Paint setup 4 Will take the layed out render trees

    4 Creates layers 4 Incremental process 4 Builds up over 12 phases

  48. RenderLayers 4 Creates layers from RenderObjects 4 Position nodes, transparency,

    overflow, canvas, video etc 4 Many-to-1 relationship a RenderLayer could contain multiple RenderObjects

  49. Painting 4 Produces a bitmap from each layer 4 Bitmap

    is uploaded to the GPU as a texture 4 Composites the textures into a final image to render to the screen

  50. Performance insight 3

  51. inline critical CSS 4 The most important bits of your

    site/app 4 Speeds up first paint times 4 External js and css can block 4 Delta last bitmap
  52. None
  53. None

  54. All of these steps Can apply after page load

  55. Recap 4 Parsing --> DOM Tree 4 DOM Tree -->

    Render Tree 4 Is actually 4 trees 4 Layout computes where a Node will be on the screen 4 Painting computes bitmaps and composites to screen

  56. The browser is complicated 4 http://www.webkit.org/projects/layout/index.html 4 http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html 4 http://www.html5rocks.com/en/tutorials/internals/

    howbrowserswork/ 4 https://www.youtube.com/watch?gl=US&v=RVnARGhhs9w 4 https://www.chromium.org/developers/design-documents/gpu- accelerated-compositing-in-chrome 4 https://www.youtube.com/watch?v=Lpk1dYdo62o

  57. Go hug a browser engineer They have a hard job

  58. Thanks