HTTP/2 : One connection to rule them all

HTTP/2 One connection to rule them all Jérémy Courtial

Some background

The time from the source sending a packet to the
destination receiving it Latency Maximum throughput of a logical or physical communication path Bandwidth

data data Latency data data Bandwidth

NY - London through ﬁber RTT ~60ms 3G network RTT
~200-1000ms Theory

ping www.nypdcadets.com RTT ~155ms ping deewr.gov.au RTT ~320ms Real life

Impact of bandwidth Page Load Time (ms) 1 000 1
440 1 880 2 320 2 760 3 200 Bandwidth 1 Mbps 3 Mbps 5 Mbps 7 Mbps 9 Mbps

Impact of latency Page Load Time (ms) 500 1 200
1 900 2 600 3 300 4 000 RTT 240ms 200ms 160ms 120ms 80ms 40ms 0ms

Back to  HTTP

Once upon a time, in 1989, at the CERN…

$> telnet cern.ch 80 GET /hello <html> <body> Hello Tim!
</body> </html> Connected to 188.184.9.234 Connection closed

GET /hello <html>…

GET /hello TCP SYN TCP SYN/ACK TCP ACK }~100 ms
Closed <html>…

Entering cats …

GET index.html GET cat.jpg SYN SYN/ACK SYN SYN/ACK }~100 ms
} ~100 ms Closed

So many more RTT DNS lookup 1 RTT TCP handshake
1 RTT TLS handshake 1-2 RTTs HTTP request 1-n RTTs

Because recycling is good Keep-Alive

GET index.html GET cat.jpg SYN SYN/ACK Closed

Yeah, sure. In 1996… Victory !

Average requests/page ~80 Average size/page ~1 200 Kb Modern web

GET index.html GET script.js GET styles.css GET cat.jpg One active
request per connection Make a coffee

GET index.html GET script.js GET styles.css GET cat.jpg Pipelining ?
Head of line blocking index.html script.js cat.jpg styles.css

Multiple connections 4-8 per hosts GET script.js GET picture.jpg GET
theme.css GET img3.jpg GET main.css GET img2.jpg GET angular.js GET print.css GET index.html GET img1.jpg GET boot.css GET utils.js GET intro.mp4 GET bg.png GET jquery.js GET icon.png

Waterfall eﬀect… index.html main.css main.js jquery.js bootstrap.css bootstrap.js intro.mp4 bg.png
img1.jpg img1.jpg img1.jpg img1.jpg img1.jpg

Optimizations… • Sharding • Concatenation • Spriting • Inlining (network
overhead) (break cache) (break cache) (break cache, duplication)

Hack ! Hack ! Hack ! Hack ! Hack !

Introducing HTTP/2

Based on SPDYv2 Retains semantic compatibility with HTTP 1.x Addresses
« head of line blocking » & multiple connections issues Improves overall performances

POST /hello Host: domain.org Content-Type: application/json Content-Length:12 {"greeting":"Hello world"}

POST /hello Host: domain.org Content-Type: application/json Content-Length:12 {"greeting":"Hello world"} HEADERS
frame DATA frame

:authority: domain.org :method: POST :path: /hello :scheme: https content-type: application/json
content-length:12 {"greeting":"Hello world"} HEADERS frame DATA frame

Binary format Length (24) Type (8) Flags (8) Stream identiﬁer
(31) R Frame payload (n) 0 1 2 4 5 16 Ko < max size < 16 Mo

Frame types DATA RST_STREAM GOAWAY PRIORITY WINDOW_UPDATE PUSH_PROMISE HEADERS PING
SETTINGS CONTINUATION

HEADERS frame DATA frame DATA frame HEADERS frame DATA frame
Request message Response message Stream

DATA frame DATA frame HEADERS frame DATA frame HEADERS frame
Request message Response message Stream

DATA frame DATA frame HEADERS frame DATA frame HEADERS frame
DATA frame DATA frame HEADERS frame DATA frame HEADERS frame Stream 2 Stream 1 DATA frame DATA frame HEADERS frame DATA frame HEADERS frame Stream 3

Strea Strea Strea HTTP 2.0 connection

HTTP 2.0 connection stream 3 HEADERS stream 7 DATA stream
7 HEADERS stream 5 DATA stream 1 DATA stream 1 DATA stream 1 DATA

Remember that ? index.html main.css main.js jquery.js bootstrap.css bootstrap.js intro.mp4
bg.png img1.jpg img1.jpg img1.jpg img1.jpg img1.jpg

Now more like that index.html main.css main.js jquery.js bootstrap.css bootstrap.js
intro.mp4 bg.png img1.jpg img1.jpg img1.jpg img1.jpg img1.jpg

And there is more !

Stream Prioritization HTML CSS JS Images > > Or whatever
algorithm you want !

Stream Dependency stream A stream C stream D stream B

GET /index.html Server push index.html styles.css

Pushed resources can be … cached declined disabled prioritized

Take that inlining !

Headers compression method GET scheme https host domain.org path /hello
user-agent Mozilla/5.0 Request 1 method GET scheme https host domain.org path /goodbye user-agent Mozilla/5.0 Request 2 :method GET :scheme https :host domain.org :path /hello user-agent Mozilla/5.0 HEADERS frame (stream 1)

Headers compression method GET scheme https host domain.org path /hello
user-agent Mozilla/5.0 Request 1 method GET scheme https host domain.org path /goodbye user-agent Mozilla/5.0 Request 2 :method GET :scheme https :host domain.org :path /hello user-agent Mozilla/5.0 HEADERS frame (stream 1) :path /goodbye HEADERS frame (stream 3)

About those Optimizations… • Sharding • Concatenation • Spriting •
Inlining KILLING  SPREE

Google 20%-40% with Chrome Twitter 30% on mobile API Latency
improvements

But how do I switch ? Ok, I’m in love
!

Upgrade & Discovery Through TLS & ALPN Because you do
TLS, right ? With prior knowledge You just know Upgrade header

Upgrade header strategy GET /hello HTTP/1.1 Host: domain.org Connection: Upgrade,
HTTP2-Settings Upgrade: HTTP/2.0 HTTP2-Settings: (SETTINGS payload) HTTP/1.1 200 OK HTTP/1.1 101 Switching Protocols

GET /hello HTTP/1.1 HTTP/1.1 200 OK HTTP/1.1 101 Switching Protocols
OR Upgrade header strategy

GET /hello HTTP/1.1 HTTP/1.1 200 OK Content-length: 112 Content-type: text/html
(HTTP 1.1 response) HTTP/1.1 101 Switching Protocols Upgrade header strategy

OR Upgrade header strategy

Connection: Upgrade Upgrade: HTTP/2.0 (HTTP 2.0 response) Upgrade header strategy

Roadmap Are we there yet ? 2014 June Draft 13
- Last Call Draft 10 Draft 11 Draft 12 Draft 14 Draft 15 Draft 16 Dec Submit for standardization

Implementations Jetty nghttp2 Chrome Firefox F5 OkHttp http2-katana Netty IE
(Win 10)

http2.github.io

What’s next ? QUIC HTTP over UDP TCP Fast Open
Goal : 0 round trip delay

Bonus !

A.k.a. « Shut the f**k up » RST_STREAM

GET /big_ﬁle TCP data TCP data TCP data TCP RST
Closed TCP SYN TCP SYN/ACK HTTP 1.x Close the TCP connection to cancel the request

This is Keep-Alive crying* :-( * Please, don’t mock my
drawing skills …

HTTP 2.0 Close the stream, keep the connection stream 1
HEADERS stream 1 DATA stream 1 DATA stream 1 DATA stream 1 RST stream 3 HEADERS stream 3 DATA

Bibliography Ilya Grigorik (@igrigorik) High Performance Browser Networking book https://www.igvita.com/
Mark Nottingham (@mnot) https://www.mnot.net/ It's the Latency, Stupid http://goo.gl/g26hOo More Bandwidth Doesn't Matter (much) http://goo.gl/wuvD1R , Stuart Cheshire , Mike Belshe

Thank you ! Questions ?

HTTP/2 : One connection to rule them all

HTTP/2 : One connection to rule them all

More Decks by Jérémy Courtial

Other Decks in Technology

Featured

Transcript