HTTP/2 What's inside and Why

3,503 views

Published on

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.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,503
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTTP/2 What's inside and Why

  1. 1. HTTP/2 What’s inside and why @adrianfcole
  2. 2. introduction http as we know it http performance hello http/2! firefox wrapping up
  3. 3. introduction http as we know it http performance hello http/2! firefox wrapping up
  4. 4. @adrianfcole • staff engineer at Twitter • founded apache jclouds • focus on cloud computing
  5. 5. introduction http as we know it http performance hello http/2! firefox wrapping up
  6. 6. http/1.1 • rfc2616 - June 1999 • text-based framing • defined semantics of the web http://www.w3.org/Protocols/rfc2616/rfc2616.html
  7. 7. FYI: RFC 2616 is dead! • RFC 7230-5 replaces RFC 2616. • Checkout details on www.mnot.net/blog
  8. 8. Latency is a product concern How you minimize latency is an IT concern @jpinner
  9. 9. Latency of http/1.1 368! keepalive
  10. 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. 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. 12. introduction http as we know it http performance hello http/2! firefox wrapping up
  13. 13. Performance strategies • Increasing connections • Reducing requests
  14. 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. 15. reducing requests • Caching - RFC 7234 change headers • Hacks - change content
  16. 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. 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. 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. 19. introduction http as we know it http performance hello http/2! firefox wrapping up
  20. 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. 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. 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. 23. multiplexing priority flow control header compression server push http/2 headline features
  24. 24. multiplexing priority flow control header compression server push http/2 headline features
  25. 25. Looking at the whole message Request: request line, headers, and body Response: status line, headers, and body
  26. 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. 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. 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. 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. 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. 31. multiplexing priority flow control header compression server push http/2 headline features
  32. 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. 33. multiplexing priority flow control header compression server push http/2 headline features
  34. 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. 35. multiplexing priority flow control header compression server push http/2 headline features
  36. 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. 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. 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. 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. 40. multiplexing priority flow control header compression server push http/2 headline features
  41. 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. 42. Opportunities Better utilize TCP Better long-tail latency Avoid content hacks Less buffer bloat
  43. 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. 44. introduction http as we know it http performance hello http/2! firefox wrapping up
  45. 45. Firefox • Supports latest drafts • source/netwerk/protocol/http • http/2 lead: Patrick McManus https://wiki.mozilla.org/Networking/http2
  46. 46. Try out http2 with Firefox! enable http2 in about:config hit https://h2duo.cloudapp.net/ with Network Tools on
  47. 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. 48. introduction http as we know it http performance hello http/2! firefox wrapping up
  49. 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. 50. Thank you! yes, twitter is hiring! yes, twitter runs http/2! github http2/http2-spec @adrianfcole

×