Learn about HTTP/2 and its relationship to HTTP 1.1 and SPDY. Understand core features and how they benefit security and browser efficiency. More that a "what's new" this talk will leave you with an understanding of why choices in HTTP/2 were made. You'll leave knowing what HTTP/2 is and why it is better for clients and servers.

1. HTTP/2
What’s inside and why
@adrianfcole

2. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

3. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

4. @adrianfcole
• staff engineer at Twitter
• founded apache jclouds
• focus on cloud computing

5. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

6. http/1.1
• rfc2616 - June 1999
• text-based framing
• defined semantics of the web
http://www.w3.org/Protocols/rfc2616/rfc2616.html

7. FYI: RFC 2616 is dead!
• RFC 7230-5 replaces RFC 2616.
• Checkout details on www.mnot.net/blog

8. Latency is a product
concern
How you minimize
latency is an IT concern
@jpinner

9. Latency of http/1.1
368!
keepalive

10. 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

11. 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.

12. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

13. Performance strategies
• Increasing connections
• Reducing requests

14. 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.

15. reducing requests
• Caching - RFC 7234 change headers
• Hacks - change content

16. 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

17. 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

18. Data Uri
• <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
• AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO
• 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
http://en.wikipedia.org/wiki/Data_URI_scheme

19. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

20. spdy/3.1
• google - Sep 2013
• binary framing
• retains http/1.1 semantics
• concurrent multiplexed streams
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3-1

21. http/2
• ietf draft 16 - June 2014
• binary framing
• retains http/1.1 semantics
• concurrent multiplexed streams
https://github.com/http2/http2-spec

22. 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.

23. multiplexing
priority
flow control
header compression
server push
http/2 headline features

24. multiplexing
priority
flow control
header compression
server push
http/2 headline features

25. Looking at the whole
message
Request: request line, headers, and body
Response: status line, headers, and body

26. http/1.1 round-trip
Content-Length: 318
Cache-Control: private, max-age=60, s-maxage=
0
Vary: SecurityToken
Date: Sun, 02 Feb 2014 20:30:38 GMT
Content-Type: application/json
Content-Encoding: gzip
GZIPPED DATA
GET /things HTTP/1.1
Host: apihost
SecurityToken: b08c85073c1a2d02
Accept: application/json
Accept-encoding: gzip, deflate
HTTP/1.1 200 OK

27. http/2 round-trip
:status: 200
content-length: 318
cache-control: private, max-age=60, s-maxage=
0
vary: SecurityToken
date: Sun, 02 Feb 2014 20:30:38 GMT
content-type: application/json
GZIPPED DATA
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
:method: GET
:authority: apihost
:path: /things
securitytoken: b08c85073c1a2d02
accept: application/json
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM

28. 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

29. 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

30. 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

31. multiplexing
priority
flow control
header compression
server push
http/2 headline features

32. priority
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
Exclusive: 0; Stream Dependency: 1, Weight: 10
HEADERS
Stream: 5
Flags: END_HEADERS, END_STREAM
Exclusive: 0; Stream Dependency: 1, Weight: 20
HEADERS
Stream: 3
Flags: END_HEADERS
HEADERS
Stream: 5
Flags: END_HEADERS
DATA
Stream: 5
Flags:
DATA
Stream: 5
Flags: END_STREAM
DATA
Stream: 3
Flags: END_STREAM
• Both streams shouldn’t
progress before their parent.
Weight is relative.
data might be sent earlier

33. multiplexing
priority
flow control
header compression
server push
http/2 headline features

34. flow control
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags:
WINDOW_UPDATE
Stream: 3
you can send 8k more data Increment: 8192
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)

35. multiplexing
priority
flow control
header compression
server push
http/2 headline features

36. http/1.1 headers
168!
Content-Length: 318
Cache-Control: private, max-age=60, s-maxage=
0
Vary: SecurityToken
Date: Sun, 02 Feb 2014 20:30:38 GMT
Content-Type: application/json
Content-Encoding: gzip
GZIPPED DATA
GET /things HTTP/1.1
Host: apihost
SecurityToken: b08c85073c1a2d02
Accept: application/json
Accept-encoding: gzip, deflate
HTTP/1.1 200 OK
195!
318
• You can gzip
data, but not
headers!

37. header compression
8 bytes
52 bytes compressed
:status: 200
content-length: 318
cache-control: private, max-age=60, s-maxage=0
vary: SecurityToken
date: Sun, 02 Feb 2014 20:30:38 GMT
content-type: application/json
content-encoding: gzip
GZIPPED DATA
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
:method: GET
:authority: apihost
:path: /things
securitytoken: b08c85073c1a2d02
accept: application/json
accept-encoding: gzip, deflate
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
8 bytes
85 bytes compressed
• 161 byte overhead
instead of 363 8 bytes

38. indexed headers!
8 bytes
28 bytes compressed
:status: 200
content-length: 318
cache-control: private, max-age=60, s-maxage=0
vary: SecurityToken
date: Sun, 02 Feb 2014 20:30:39 GMT
content-type: application/json
content-encoding: gzip
GZIPPED DATA
HEADERS
Stream: 3
Flags: END_HEADERS, END_STREAM
:method: GET
:authority: apihost
:path: /things
securitytoken: b08c85073c1a2d02
accept: application/json
accept-encoding: gzip, deflate
HEADERS
Stream: 3
Flags: END_HEADERS
DATA
Stream: 3
Flags: END_STREAM
8 bytes
30 bytes compressed
• 82 byte overhead
instead of 363 8 bytes

39. hpack
• ietf draft 10 - Dec 2014
• static and dynamic table
• huffman encoding
http://tools.ietf.org/html/draft-ietf-httpbis-header-compression-10

40. multiplexing
priority
flow control
header compression
server push
http/2 headline features

41. push promise
HEADERS
Stream: 3
:method: GET
:path: /things
...
HEADERS
Stream: 3
PUSH_PROMISE
Stream: 3
Promised-Stream: 4
:method: GET
:path: /users/0
...
HEADERS
Stream: 4
DATA
Stream: 4
push
response
goes into
cache
DATA
Stream: 3
Server guesses a
future request or
indicates a cache
invalidation

42. Opportunities
Better utilize TCP
Better long-tail latency
Avoid content hacks
Less buffer bloat

43. Challenges
Higher impact of TCP Slow start
Fairness on the network
Server and browser support
debugging a binary protocol
Writing for tomorrow, with today’s TLS

44. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

45. Firefox
• Supports latest drafts
• source/netwerk/protocol/http
• http/2 lead: Patrick McManus
https://wiki.mozilla.org/Networking/http2

46. Try out http2 with Firefox!
enable http2 in about:config
hit https://h2duo.cloudapp.net/ with Network Tools on

47. Push promise in Firefox
Push 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

48. introduction
http as we know it
http performance
hello http/2!
firefox
wrapping up

49. 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

50. Thank you!
yes, twitter is hiring!
yes, twitter runs http/2!
github http2/http2-spec
@adrianfcole