Post on 02-Jul-2015
description
HTTP/2What’s inside and why
@adrianfcole
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
@adrianfcole
• staff engineer at Twitter• founded apache jclouds• focus on cloud computing
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
http/1.1• rfc2616 - June 1999• text-based framing• defined semantics of the web
http://www.w3.org/Protocols/rfc2616/rfc2616.html
FYI: RFC 2616 is dead!
• RFC 7230-5 replaces RFC 2616.
• Checkout details on www.mnot.net/blog
Latency is a product concern
How you minimize latency is an IT concern
@jpinner
Latency of http/1.1
368!
keepalive
Ask Ilya why!
• TCP connections need 3-way handshake.
• TLS requires up to 2 more round-trips.
• Read High Performance Browser Networking
http://chimera.labs.oreilly.com/books/1230000000545
HTTP nowadays
• Web pages are often >1 MB and >100 requests.
• Http headers can be larger than its data.
• More people on mobile, and latency adds up.
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
Performance strategies
• Increasing connections
• Reducing requests
Increasing connections
• Requests and responses are ordered on a connection.
• To render the page quicker, multiple connections can be used, usually 6.
• some shard sites to get more than that!
• Browsers handle scheduling and priority of these connections.
reducing requests
• Caching - RFC 7234 change headers
• Hacks - change content
Content hacks
• Spriting - many images into a sheet, chop with css.
• Data uris - encode images in the img tag
• Concatenation - bundle javascript or css into the same file
Spriting• #prev {• left: 63px;• width: 43px;• background: url('img_navsprites.gif') -47px 0;• }
• #next {• left: 129px;• width: 43px;• background: url('img_navsprites.gif') -91px 0;• }
http://www.w3schools.com/css/css_image_sprites.asp
Data Uri
• <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA• AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO• 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
http://en.wikipedia.org/wiki/Data_URI_scheme
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
spdy/3.1
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3-1
• google - Sep 2013• binary framing• retains http/1.1 semantics• concurrent multiplexed streams
http/2
https://github.com/http2/http2-spec
• ietf draft 16 - June 2014• binary framing• retains http/1.1 semantics• concurrent multiplexed streams
HTTP/2 Delivers
• Avoids head-of-line blocking by framing multiplexed http over a single connection.
• Identifies request streams allowing prioritization, flow control and cancelation.
• Reduces impact of headers by compressing them.
multiplexing
priority
flow control
header compression
server push
http/2 headline features
multiplexing
priority
flow control
header compression
server push
http/2 headline features
Looking at the whole message
Request: request line, headers, and body
Response: status line, headers, and body
http/1.1 round-trip
GZIPPED DATA
Content-Length: 318Cache-Control: private, max-age=60, s-maxage=0Vary: SecurityToken Date: Sun, 02 Feb 2014 20:30:38 GMTContent-Type: application/jsonContent-Encoding: gzip
Host: apihostSecurityToken: b08c85073c1a2d02Accept: application/jsonAccept-encoding: gzip, deflate
GET /things HTTP/1.1
HTTP/1.1 200 OK
http/2 round-trip
GZIPPED DATA
:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:38 GMTcontent-type: application/json
:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/json
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
interleaving
HEADERS
Stream: 5
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 5
Flags:
DATA
Stream: 5
Flags: END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 5
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
Canceling a Stream
HEADERS
Stream: 5
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 5
Flags:
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 5
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
RST_STREAM
Stream: 5
ErrorCode: CANCEL
control frames
HEADERS
Stream: 5
HEADERS
Stream: 3
DATA
Stream: 5
DATA
Stream: 3
HEADERS
Stream: 3
HEADERS
Stream: 5
SETTINGS
Stream: 0
SETTINGS
Stream: 0
DATA
Stream: 5
multiplexing
priority
flow control
header compression
server push
http/2 headline features
priorityHEADERS
Stream: 5
Flags: END_HEADERS, END_STREAM
Exclusive: 0; Stream Dependency: 1, Weight: 20
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 5
Flags:
DATA
Stream: 3
Flags: END_STREAM
HEADERS
Stream: 5
Flags: END_HEADERS
DATA
Stream: 5
Flags: END_STREAM
• Both streams shouldn’t progress before their parent. Weight is relative.
data might be sent earlier
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
Exclusive: 0; Stream Dependency: 1, Weight: 10
multiplexing
priority
flow control
header compression
server push
http/2 headline features
flow control
DATA
Stream: 3
Flags:
HEADERS
Stream: 3
Flags: END_HEADERS
WINDOW_UPDATE
Stream: 3
Increment: 8192you can send 8k more data
DATA
Stream: 3
Flags: END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
• flow control: send up to the lesser of stream window and connection window (stream 0)
multiplexing
priority
flow control
header compression
server push
http/2 headline features
http/1.1 headers
GZIPPED DATA
Content-Length: 318Cache-Control: private, max-age=60, s-maxage=0Vary: SecurityToken Date: Sun, 02 Feb 2014 20:30:38 GMTContent-Type: application/jsonContent-Encoding: gzip
Host: apihostSecurityToken: b08c85073c1a2d02Accept: application/jsonAccept-encoding: gzip, deflate
GET /things HTTP/1.1
HTTP/1.1 200 OK
168!
195!
318
• You can gzip data, but not headers!
header compression
GZIPPED DATA
:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:38 GMTcontent-type: application/jsoncontent-encoding: gzip
:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/jsonaccept-encoding: gzip, deflate
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
8 bytes
52 bytes compressed
8 bytes
85 bytes compressed
• 161 byte overhead instead of 363 8 bytes
indexed headers!
GZIPPED DATA
:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:39 GMTcontent-type: application/jsoncontent-encoding: gzip
:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/jsonaccept-encoding: gzip, deflate
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
8 bytes
28 bytes compressed
8 bytes
30 bytes compressed
• 82 byte overhead instead of 363 8 bytes
hpack
http://tools.ietf.org/html/draft-ietf-httpbis-header-compression-10
• ietf draft 10 - Dec 2014• static and dynamic table• huffman encoding
multiplexing
priority
flow control
header compression
server push
http/2 headline features
push promise
:method: GET:path: /things...
HEADERS
Stream: 3
HEADERS
Stream: 3
DATA
Stream: 4
:method: GET:path: /users/0...
PUSH_PROMISE
Stream: 3
Promised-Stream: 4
HEADERS
Stream: 4
push response goes into
cache
DATA
Stream: 3
Server guesses a future request or indicates a cache invalidation
Opportunities
Better utilize TCP
Avoid content hacks
Better long-tail latency
Less buffer bloat
ChallengesHigher impact of TCP Slow start
Server and browser support
Fairness on the network
debugging a binary protocol
Writing for tomorrow, with today’s TLS
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
Firefox• Supports latest drafts• source/netwerk/protocol/http• http/2 lead: Patrick McManus
https://wiki.mozilla.org/Networking/http2
Try out http2 with Firefox!enable http2 in about:config
hit https://h2duo.cloudapp.net/ with Network Tools on
Push promise in FirefoxPush promises are sent into a per-session memory cache.
When the client requests the pushed resources, they are committed to the disk cache.
Allows a cap and easy discard of unused pushes.
http://bitsup.blogspot.com/2014/12/firefox-gecko-api-for-http2-push.html
introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up
Engage!
• Get your web sites running http/2 or spdy!
• Spread the word and get involved in http/2.
• Provide feedback to httpbis!
https://github.com/http2/http2-spec/wiki/Implementations
https://github.com/http2/http2-spec
Thank you!
yes, twitter is hiring!yes, twitter runs http/2!
github http2/http2-spec@adrianfcole