HTTP/2 What's inside and Why

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

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

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.

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

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

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

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

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)

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

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

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

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

HTTP/2 What's inside and Why

Adrian Cole

HTTP/2 What's inside and Why