Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

HTTP/2 What's inside and Why

4.036 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Unterhaltung & Humor
  • Als Erste(r) kommentieren

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

×