Web Browsers - Under the hood

Slide 1

Slide 1 text

Web Browsers Under the hood -‐ Vasanth Krishnamoorthy

Slide 2

Slide 2 text

What happens? 1 Minute rundown •  Parsing the URL •  GET’Bng the page •  Browser re-‐entry •  Parsing HTML •  DOM •  Rendering the page

Slide 3

Slide 3 text

Surﬁng www.google.com

Slide 4

Slide 4 text

Parsing the URL h+p://www.google.com •  Retrieve •  Protocol: hMp or hMps •  Resource: "/": Retrieve main (index) page •  Check url with HSTS (HTTP Strict transport security) list •  DNS mapping

Slide 5

Slide 5 text

DNS lookup Domain Name System Sequence of checks •  Browser Cache •  OS Cache •  Router Cache •  ISP DNS cache

Slide 6

Slide 6 text

DNS Lookup Finding the IP

Slide 7

Slide 7 text

DNS hierarchy

Slide 8

Slide 8 text

The handshake…

Slide 9

Slide 9 text

The handshake

Slide 10

Slide 10 text

GET’Bng the page •  IdenBfy the browser •  Accepted response •  Supported encoding •  Cookie info

Slide 11

Slide 11 text

Server response handler •  HTTP Daemon server (Apache or nginx) •  Breaks down the request headers (methods/path) •  Pull content based on requested path (/) •  The server parses the ﬁle according to the request handler. •  Eg. PHP, ASP.NET etc •  In the case of PHP interpret the index ﬁle and stream the output

Slide 12

Slide 12 text

Downloading page……

Slide 13

Slide 13 text

Server Response Decompressed gzip

Slide 14

Slide 14 text

Browser Re-‐entry Tasks •  Parsing •  HTML, CSS, JS •  Rendering

Slide 15

Slide 15 text

Browser: High Level

Slide 16

Slide 16 text

HTML Parsing

Slide 17

Slide 17 text

DOM tree

Slide 18

Slide 18 text

Render tree Visual representaBon of DOM (Boxes with geometry)

Slide 19

Slide 19 text

Layout

Slide 20

Slide 20 text

CSS-‐OM + Layout Layout •  Maps elements to co-‐ordinates in the viewport •  When the renderer is created and added to the tree, it does not have a posiBon and size. CalculaBng these values is called layout or reﬂow. •  In order not to do a full layout for every small change, browsers use a "dirty bit" system. A renderer that is changed or added marks itself and its children as "dirty": needing layout.

Slide 21

Slide 21 text

PainBng

Slide 22

Slide 22 text

PainBng •  The render tree is traversed and the renderer's "paint()" method is called to display content on the screen. PainEng uses the UI infrastructure component. •  Like layout, painBng can also be global–the enBre tree is painted–or incremental. •  Before repainBng, WebKit saves the old rectangle as a bitmap. It then paints only the delta between the new and old rectangles. •  Color changes: only repaint •  Element posiBon changes: Layout and repaint of the el + children •  Major changes, like increasing font size of the "html" element, will cause invalidaBon of caches, relayout and repaint of the enBre tree.

Slide 23

Slide 23 text

Smooth rendering

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Browser Rendering recap

Slide 26

Slide 26 text

References •  What really happens when you navigate to a URL hMp://igoro.com/archive/what-‐really-‐happens-‐when-‐you-‐navigate-‐to-‐ a-‐url/ •  How Browsers Work: Behind the scenes of modern web browsers hMp://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ •  What happens when hMps://github.com/alex/what-‐happens-‐when •  Repo of my detailed learnings on this topic •  How Web works? •  h+ps://github.com/vasanthk/how-‐web-‐works

Slide 27

Slide 27 text

No content