Introduction to HTTP/2

Introducing HTTP/2Ido FlatowSenior Architect, Sela GroupMicrosoft RD & MVP

INTRODUCING HTTP/2

Agenda• Web (HTTP 1.1) and its current state• What is (HTTP/2) – and how fast is it?• Goals of HTTP/2• HTTP/2 concepts• How to troubleshoot

INTRODUCING HTTP/2

Web – Current State• HTTP 1.1 is huge

– HTTP 1.0 RFC 1945 – released 1996 – 60 pages– HTTP 1.1 RFC 2626 – released 1999 – 176 pages– Now split into 6 documents – RFC 7230 and family

• Incomplete implementation of RFC– Eg. HTTP pipelining

• Inadequate use of TCP

INTRODUCING HTTP/2

Transfer Size +300% in 4.5 Years• January 2012 – December 2016

(http://httparchive.org) top 1000 sites

INTRODUCING HTTP/2

Shortcoming – Current Web• Concurrent connection limit• Head of line blocking• TCP slow start• Latency – page load time

INTRODUCING HTTP/2

Max Persistent Connections• From HTTP 1.1 RFC:

– “Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. … These guidelines are intended to improve HTTP response times and avoid congestion.”

• Firefox 2 – 2• Firefox 3 and on – 6• Opera 9.26 – 4• Opera 12 – 6• Safari 3 – 4• Safari 5 – 6• IE 7 – 2• IE 8 – 6• IE 10 – 8• Chrome – 6

Avg. TCP connections during page load (Last 24 months)

INTRODUCING HTTP/2

Head-of-Line Blocking (No Pipelining)• Each connection can only

handle one request at a time• If current request blocks, next

request will wait• HTTP 1.1 defines pipelining,

but most browsers do not implement it

INTRODUCING HTTP/2

TCP Slow Start• TCP does not use the

full bandwidth capacity from start

• TCP probes network to find available capacity

INTRODUCING HTTP/2

Latency vs Bandwidth• Average web page has over 100 objects to download• Largest impact on page load time is latency, not

bandwidth

https://www.akamai.com/us/en/our-thinking/state-of-the-internet-report

INTRODUCING HTTP/2

What is 20ms of Latency?

(RTT = Round-trip time)

INTRODUCING HTTP/2

What Have we Done to Improvise?• Reduce # of requests and latency

overhead– Spriting– Concatenation/Bundling (JavaScript, CSS)– Inlining

• Overcome max connection limit– Domain sharding

INTRODUCING HTTP/2

Spriting.d1, .d2, .d3, .d4, .d5, .d6, .d7 { background:transparent url("dir_sprite.png") no-repeat 4px 0;}.d2 {background-position:4px -36px;}.d3 {background-position:4px -74px;}

INTRODUCING HTTP/2

Concatenation and Inlining• Join multiple script/style files into a single

resource• Embed JavaScript and CSS within the page• Inline images in CSS or HTML using data URIs

(Base64 encoding)<img src="data:image/gif; base64,R0lGODlhAQABAIAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" alt="1x1 transparent (GIF) pixel" />

INTRODUCING HTTP/2

Domain Sharing• Work around the max connection

restriction• Minimal overhead for DNS lookup

INTRODUCING HTTP/2Problems with “optimizations”

• Spriting– Painful and annoying preprocessing, cache invalidations, slower

executions• Inlining

– Resource can’t be cached, inflates parent document by 33% overhead

• Concatenation – Less modular code, expensive cache invalidators, slower execution

• Domain sharding– TCP slowstart, excessive DNS lookup, latency

INTRODUCING HTTP/2

HTTP/2 to the Rescue• Improve latency and less RTT sensitive• Fix pipelining and remove “head of line

blocking”• Does not require multiple connections

• Achieved all this by retaining semantics of HTTP 1.1

INTRODUCING HTTP/2

It Began with SPDY• Originally proposed by Google as a wire format

extension to HTTP in 2011• Implements all the major features of HTTP/2• Serves as a testbed for improvements to HTTP

– Without the burden of standardization • SPDY became the basis of HTTP/2 in 2012• Chrome stopped using SPDY in May 2016

INTRODUCING HTTP/2

What is HTTP/2• HTTP/2 uses a single, multiplexed connection

– Max connection limit per domain can be ignored

• HTTP/2 compresses header data and sends it in a concise, binary format– Better than the plain text format used previously

• Less need for popular HTTP 1.1 optimizations

INTRODUCING HTTP/2

HTTP/2 Specification• Started with SPDY - draft 3• Comprised out of two specifications– HTTP/2 – RFC7540– HPACK (header compression) – RFC7541

• Implementations– HTTP/2 over TLS (h2) – HTTP/2 over TCP (h2c)

INTRODUCING HTTP/2

HTTP/2 Over TLS (h2)• HTTP/2 shipped with TLS as optional• Firefox and Chrome developer teams stated

they will only implement HTTP/2 over TLS• Today, only HTTPS:// is allowed for HTTP/2• TLS must be at least v1.2, with cipher suite

restrictionshttps://http2.github.io/http2-spec/#BadCipherSuites

INTRODUCING HTTP/2

HTTP/2 in One Slide• One TCP connection• Request → Stream

– Streams are multiplexed– Streams are prioritized

• Binary framing layer– Prioritization– Flow control– Server push

• Header compression (HPACK)

INTRODUCING HTTP/2

TCP Connections - HTTP 1.1 vs HTTP/2

• HTTP 1.1

• HTTP/2

Client

http://www.url.com

Client

http://www.url.com

INTRODUCING HTTP/2

DEMO

INTRODUCING HTTP/2

Am I Using HTTP/2?

IE

Chrome

INTRODUCING HTTP/2

HTTP/2 Support• Servers

– Microsoft IIS 10(Win 10 / Server 2016)

– Apache 2.4.12– Nginx 1.9.5– Jetty 9.3– Many more…

• Browsers– Edge– IE11 (Windows 10)– Firefox 40+– Chrome 43+– Safari 9+– Opera 32+– iOS Safari 9.1+– Chrome for Android 46+– CURLGoogle, Facebook, Twitter and many more are using HTTP/2 already

HTTP/2 is used by 11.9% of all websites (Jan. 2017 http://w3techs.com)

INTRODUCING HTTP/2

HTTP/2 Multiplexing• Each request/response stream has an ID• Streams comprise of frames (Header, Data…)• TCP connection can have multiple streams• Frames can be interleaved in the TCP channel• Stream dependencies control frame prioritization• Server (IIS/ASP.NET) sees streams as TCP connections

INTRODUCING HTTP/2

Frame TypesFrame type DescriptionDATA HTTP bodyHEADERS Header fieldsPRIORITY Sender-advised priority of streamRST_STREAM Signal termination of streamSETTINGS Configuration parameters for the connectionPUSH_PROMISE Signal a promise (push) of referenced sourcesPING Measure roundtrip time and “liveness”GOAWAY Inform peer to stop creating streams for current connectionWINDOW_UPDATE Connection flow controlCONTINUATION Continue a segment of header block fragments

INTRODUCING HTTP/2

Header Compression (HPACK)

INTRODUCING HTTP/2

DEMO

INTRODUCING HTTP/2

How to Troubleshoot - Chrome• Net Internals console in Chrome• chrome://net-internals/#http2

INTRODUCING HTTP/2How to Troubleshoot - Wireshark

• Export symmetric session keys to a file• Load it with Wireshark

– Preferences->Protocols->SSL• Works with Chrome

and Firefox

C:\> set SSLKEYLOGFILE = %userprofile%\desktop\sslkeylog.log$ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log

INTRODUCING HTTP/2

How to Troubleshoot - Wireshark

INTRODUCING HTTP/2

How to Troubleshoot - Wireshark

INTRODUCING HTTP/2

How to Troubleshoot - Wireshark

INTRODUCING HTTP/2

DEMO

INTRODUCING HTTP/2

Server Push (Promise)• After the server responds with an HTML, it waits for requests to

embedded resources• Server code knows which resources client needs

– JavaScript – CSS– Images– HTML pages of future navigation

• Why not just push it to the client along with the HTML?• In ASP.NET, use HttpResponse.PushPromisestring path = Request.ApplicationPath;Response.PushPromise(path + "/Images/1.png");Response.PushPromise(path + "/Images/2.png");

INTRODUCING HTTP/2

DEMO

INTRODUCING HTTP/2

Summary• Multiplexing

– Multiple requests and responses– Fixes head-of-line blocking problem– Avoid the HTTP 1.1 hacks– Mechanism for request prioritization

• Fewer TCP connections– Reduces TCP slow start

• Header compression• Server Push

INTRODUCING HTTP/2

Resources• https://http2.github.io/faq• http://daniel.haxx.se/http2/http2-v1.10.pdf• https://tools.ietf.org/html/rfc7540• http://blogs.iis.net/davidso/http2• http://blogs.msdn.com/b/webdev/archive/2015/04/30/

updates-for-asp-net-4-6-web-forms-mvc-5-web-api-2.aspx

@IdoFlatow // idof@sela.co.il // www.idoflatow.net/downloads