Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTTP/2 
What’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...
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 Performan...
HTTP nowadays 
• Web pages are often >1 MB and >100 
requests. 
• Http headers can be larger than its data. 
• More people...
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 
co...
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 
• Conca...
Spriting 
• #prev { 
• left: 63px; 
• width: 43px; 
• background: url('img_navsprites.gif') -47px 0; 
• } 
• #next { 
• le...
Data Uri 
• <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
• AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/ 
w38GIAXD...
introduction 
http as we know it 
http performance 
hello http/2! 
firefox 
wrapping up
spdy/3.1 
• google - Sep 2013 
• binary framing 
• retains http/1.1 semantics 
• concurrent multiplexed streams 
http://ww...
http/2 
• ietf draft 16 - June 2014 
• binary framing 
• retains http/1.1 semantics 
• concurrent multiplexed streams 
htt...
HTTP/2 Delivers 
• Avoids head-of-line blocking by framing 
multiplexed http over a single connection. 
• Identifies reque...
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 
Content-Length: 318 
Cache-Control: private, max-age=60, s-maxage= 
0 
Vary: SecurityToken 
Date: Sun...
http/2 round-trip 
:status: 200 
content-length: 318 
cache-control: private, max-age=60, s-maxage= 
0 
vary: SecurityToke...
interleaving 
HEADERS 
Stream: 5 
Flags: END_HEADERS, END_STREAM 
HEADERS 
Stream: 3 
Flags: END_HEADERS 
DATA 
Stream: 5 ...
Canceling a Stream 
HEADERS 
Stream: 5 
Flags: END_HEADERS, END_STREAM 
HEADERS 
Stream: 3 
Flags: END_HEADERS 
DATA 
Stre...
control frames 
HEADERS 
Stream: 5 
HEADERS 
Stream: 3 
DATA 
Stream: 5 
DATA 
Stream: 3 
HEADERS 
Stream: 3 
HEADERS 
Str...
multiplexing 
priority 
flow control 
header compression 
server push 
http/2 headline features
priority 
HEADERS 
Stream: 3 
Flags: END_HEADERS, END_STREAM 
Exclusive: 0; Stream Dependency: 1, Weight: 10 
HEADERS 
Str...
multiplexing 
priority 
flow control 
header compression 
server push 
http/2 headline features
flow control 
HEADERS 
Stream: 3 
Flags: END_HEADERS 
DATA 
Stream: 3 
Flags: 
WINDOW_UPDATE 
Stream: 3 
you can send 8k m...
multiplexing 
priority 
flow control 
header compression 
server push 
http/2 headline features
http/1.1 headers 
168! 
Content-Length: 318 
Cache-Control: private, max-age=60, s-maxage= 
0 
Vary: SecurityToken 
Date: ...
header compression 
8 bytes 
52 bytes compressed 
:status: 200 
content-length: 318 
cache-control: private, max-age=60, s...
indexed headers! 
8 bytes 
28 bytes compressed 
:status: 200 
content-length: 318 
cache-control: private, max-age=60, s-m...
hpack 
• ietf draft 10 - Dec 2014 
• static and dynamic table 
• huffman encoding 
http://tools.ietf.org/html/draft-ietf-h...
multiplexing 
priority 
flow control 
header compression 
server push 
http/2 headline features
push promise 
HEADERS 
Stream: 3 
:method: GET 
:path: /things 
... 
HEADERS 
Stream: 3 
PUSH_PROMISE 
Stream: 3 
Promised...
Opportunities 
Better utilize TCP 
Better long-tail latency 
Avoid content hacks 
Less buffer bloat
Challenges 
Higher impact of TCP Slow start 
Fairness on the network 
Server and browser support 
debugging a binary proto...
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.or...
Try out http2 with Firefox! 
enable http2 in about:config 
hit https://h2duo.cloudapp.net/ with Network Tools on
Push promise in Firefox 
Push promises are sent into a per-session 
memory cache. 
When the client requests the pushed res...
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 t...
Thank you! 
yes, twitter is hiring! 
yes, twitter runs http/2! 
github http2/http2-spec 
@adrianfcole
Prochain SlideShare
Chargement dans…5
×

HTTP/2 What's inside and Why

4 037 vues

Publié le

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.

  • Soyez le premier à commenter

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

×