© Copyright SELA Software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

Ido Flatow

Introducing HTTP/2

About MeSenior Architect, Sela GroupOther titles: Microsoft Regional Director, IIS/ASPNET MVPCo-author of courses and booksFocus on server, web, and cloudManager of the Israeli Web Developers User Group

AgendaWeb (HTTP 1.1) and its current stateWhat is (HTTP/2) – and how fast is it?Goals of HTTP/2HTTP/2 conceptsHow to troubleshoot

Web – Current StateHTTP 1.1 is huge

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

Incomplete implementation of RFCEg. HTTP pipelining

Inadequate use of TCP

Average Request +150% in 3 Years

Jan 2012 – Nov 2015 (http://httparchive.org) top 1000 sites

Shortcoming – Current WebConcurrent connection limitHead of line blockingTCP slow startLatency – page load time

Max Persistent ConnectionsFrom 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 – 2Firefox 3 and on – 6Opera 9.26 – 4Opera 12 – 6Safari 3 – 4Safari 5 – 6IE 7 – 2IE 8 – 6IE 10 – 8Chrome – 6

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

Head-of-Line Blocking (No Pipelining)Each connection can only handle one request at a timeIf current request blocks, next request will waitHTTP 1.1 defines pipelining, but most browsers do not implement it

TCP Slow StartTCP does not use the full bandwidth capacity from startTCP probes network to find available capacity

Latency vs BandwidthAverage web page has over 100 objects to downloadLargest impact on page load time is latency, not bandwidth

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

What is 20ms of Latency?

(RTT = Round-trip time)

What Have we Done to Improvise?

Reduce # of requests and latency overhead

SpritingConcatenation (JavaScript, CSS)Inlining

Overcome max connection limitDomain sharding

Problems with “optimizations”Spriting

Painful and annoying preprocessing, cache invalidations, slower executions

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

Concatenation Less modular code, expensive cache invalidators, slower execution

Domain shardingTCP slowstart, excessive DNS lookup, latency

HTTP/2 to the RescueImprove latency and less RTT sensitiveFix pipelining and remove “head of line blocking”Does not require multiple connections

Achieved all this by retaining semantics of HTTP 1.1

It Began with SPDYOriginally proposed by Google as a wire format extension to HTTP in 2011Implements all the major features of HTTP/2Serves as a testbed for improvements to HTTP

Without the burden of standardization SPDY became the basis of HTTP/2 in 2012SPDY will cease to exist in 2016, making way to HTTP/2

What is HTTP/2HTTP/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

HTTP/2 SpecificationStarted with SPDY - draft 3Comprised out of two specifications

HTTP/2 – RFC7540HPACK (header compression) – RFC7541

ImplementationsHTTP/2 over TLS (h2) HTTP/2 over TCP (h2c)

HTTP/2 Over TLS (h2)HTTP/2 shipped with TLS as optionalFirefox and Chrome developer teams stated they will only implement HTTP/2 over TLSToday, only HTTPS:// is allowed for HTTP/2TLS must be at least v1.2, with cipher suite restrictionshttps://http2.github.io/http2-spec/#BadCipherSuites

HTTP/2 Over TCP (h2c)Uses the Upgrade headerPlans to support on IE, already supported in CURL

GET /page HTTP/1.1Host: server.example.comConnection: Upgrade, HTTP2-SettingsUpgrade: h2c HTTP2-Settings: (SETTINGS payload)

HTTP/1.1 200 OK Content-length: 243Content-type: text/html

(... HTTP/1.1 response ...)

--- or ---

HTTP/1.1 101 Switching Protocols Connection: UpgradeUpgrade: h2c

(... HTTP/2 response ...)

HTTP/2 in One SlideOne TCP connectionRequest → Stream

Streams are multiplexedStreams are prioritized

Binary framing layerPrioritizationFlow controlServer push

Header compression (HPACK)

TCP Connections - HTTP 1.1 vs HTTP/2

HTTP 1.1

HTTP/2

Client

http://www.url.com

Client

http://www.url.com

Demo

How to Troubleshoot - Dev ToolsIE

Chrome

HTTP/2 SupportServers

Microsoft IIS 10(Win 10 / Server 2016)Apache 2.4.12Nginx 1.9.5Jetty 9.3Many more…

BrowsersEdgeIE11 (Windows 10)Firefox 40+Chrome 43+Safari 9+Opera 32+iOS Safari 9.1+Chrome for Android 46+CURL

Google, Facebook, Twitter and many more are using HTTP/2 alreadyHTTP/2 is used by 4.5% of all websites (Dec. 2015 http://w3techs.com)

HTTP/2 MultiplexingEach request/response stream has an IDStreams comprise of frames (Header, Data…)TCP connection can have multiple streamsFrames can be interleaved in the TCP channelStream dependencies control frame prioritizationServer (IIS/ASP.NET) sees streams as TCP connections

Frame TypesFrame type Description

DATA HTTP body

HEADERS Header fields

PRIORITY Sender-advised priority of stream

RST_STREAM Signal termination of stream

SETTINGS Configuration parameters for the connection

PUSH_PROMISE Signal a promise (push) of referenced sources

PING Measure roundtrip time and “liveness”

GOAWAY Inform peer to stop creating streams for current connection

WINDOW_UPDATE Connection flow control

CONTINUATION Continue a segment of header block fragments

Header Compression (HPACK)

DemoWait a second…

How to Troubleshoot - Wireshark

Works with Chrome and Firefox only (Windows, Linux, Mac)Set SSLKeyLogFile for HTTPS sniffingWireshark->Preferences->Protocols->SSL

C:\> set SSLKEYLOGFILE=c:\temp\sslkeylog.log

How to Troubleshoot - Wireshark

How to Troubleshoot - Wireshark

How to Troubleshoot - Wireshark

Demo

Server Push (Promise)After the server responds with an HTML, it waits for requests to embedded resourcesServer code knows which resources client needs

JavaScript CSSImagesHTML pages of future navigation

Why not just push it to the client along with the HTML?In ASP.NET, use HttpResponse.PushPromise

string path = Request.ApplicationPath;Response.PushPromise(path + "/Images/1.png");Response.PushPromise(path + "/Images/2.png");

Demo

SummaryMultiplexing

Multiple requests and responsesFixes head-of-line blocking problemAvoid the HTTP 1.1 hacksMechanism for request prioritization

Fewer TCP connectionsReduces TCP slow start

Header compressionServer Push

Resourceshttps://http2.github.io/faqhttp://daniel.haxx.se/http2/http2-v1.10.pdfhttps://tools.ietf.org/html/rfc7540http://blogs.iis.net/davidso/http2http://blogs.msdn.com/b/webdev/archive/2015/04/30/updates-for-asp-net-4-6-web-forms-mvc-5-web-api-2.aspx