Browsers 101

View Github Repository Open presentation in a new window

yoavweiss

See all presentation from yoavweiss

Browsers 101

0 0

how_browsers_work

On Github yoavweiss / how_browsers_work

Browsers 101

What's a browser?

  • Rendering engine
  • JavaScript engine
  • Graphics layer
  • Networking layer
  • Image, video & audio decoders

Which ones?

  • Chrome & Opera(Blink)
  • Firefox (Gecko)
  • IE
  • Safari (WebKit)

HTTP vs. HTTPS

HTTP is insecure. HTTPS over TLS. HTTP2 is a better performing protocol. Traditionally everything was over HTTP, but we've discovered that it's a huge security problem. Moving everything to HTTPS is a slow process that already started.

What's a Web page?

HTML + subresources

Resource types

  • CSS
  • JS
  • Images
  • Fonts

Images?

There are content images and background images. Also, there are many supported file formats: PNG, GIF JPG. Then browser specific image types: WebP, JPEGXR, JP2K !!!! end of first hour !!!!

Web page loading

DNS, then TCP, (then TLS), then HTML is downloaded Then the browser discovers the rest of the resources in the page and start to download them.

TCP connections

Historically with HTTP1.0 4 connections were reused and closed after each resource. HTTP1.1 introduced connection keep alive (sort of). Limited to 2 connections per host

Latency killed performance

What did we do?

Anyone has ideas how we traditionally tackled that connection number limitation? What were the problems with that?

Sharding has its costs

Also - extra congestion!

How a resource is downloaded?

HTML parsing

HTML is not XML. Parsing involves many subtle rules. There were attempts to converge the two (XHTML). Failed miserably. Show the DOM in the inspector.

Web page rendering

CSS zen garden. Show what CSS means

Resource loading

parser loads resource upon element creation or addition to the DOM. CSSOM waits for style calc until resources are loaded.

Preloader

Rendering critical path

Example

Loading critical path

loading critical path doesn't always align with rendering critical path. We should strive for it to align.

Render blocking resources

Resource loading priority

Loading events

DOMContentLoaded, window.onload, img.onload

Non-blocking script loading

Defer maintains order, but is broken in IE<9.

Responsive Web Design

Fluid Grids

Media Queries

Flexible images

Responsive images

Client hints

Resource hints

Questions?