Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTTP/2
https://imququ.com
2008.4 ~ 2011.5
2011.8 ~ 360
360
https://imququ.com
Part I HTTP
Hypertext Transfer Protocol
$> telnet igvita.com 80
Connected to 173.230.151.99
GET /archive
Hypertext delivery with HTTP 0.9! - eom.
(connection clos...
$> telnet ietf.org 80
Connected to 74.125.xxx.xxx
GET /rfc/rfc1945.txt HTTP/1.0
User-Agent: CERN-LineMode/2.15 libwww/2.17...
$> telnet google.com 80
Connected to 74.125.xxx.xxx
GET /index.html HTTP/1.1
Host: website.org
User-Agent: Mozilla/5.0 (Ma...
HTTP 1.1 2014
RFC2616 - Hypertext Transfer Protocol -- HTTP/1.1
RFC7230 - HTTP/1.1: Message Syntax and Routing
- low-level...
SPDY ? 2012 - 2015
Part II HTTP/1
Web ...
Web Web
SPA
HttpArchive
Web ...
~2000 KB

~100
~17
~50
● Cable profile (5Mbps / 28 ms RTT)
● Main thread attributionin Blink
o Measured via Telemetry
● 69.5% of time blocked on ...
HTTP -
TCP
/
Keep-Alive
TCP
✗
Pipelining
RFC2616 2 RFC7230
6
• Batch Ajax Request
• CSS Sprite
• CSS JS Concatenation
• CSS JS Inline
• Data URI
• ... ...
TCP /
- TCP 6
- DNS TCP TCP
-
-
HTTP
-
- Cookie-Less
- CSS JS
-
HTTP/1
HTTP/1
HTTP/2
Part III HTTP2
HTTP/2
RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2)
RFC 7541 - HPACK: Header Compression for HTTP/2
HTTP/2
TCP
=> Stream
- Multiplexed
- Prioritized
- Prioritization
- Flow control
- Server Push
Header Compression HPACK
=>
=>
Server Push
ClientServer
PUSH_PROMISE
HPACK header compression
● Literal values are (optionally) encoded with a static Huffman code
● Previously sent values are...
↓~54%
↓~90%
Part IV HTTP2
Web Server
>>
CanIUse
*Only Win10
HTTP/2
HTTP/2
H2C HTTP/2 Cleartext
Firefox Chrome Safari IE Edge
H2C
Chrome HTTPS
2015 8 Chrome HTTPS 63%
HTTPS
HTTP
Chrome HTTPS API
ALPN
HTTP/2
HTTP/2
Chrome
FireFox
HTTP/2
HTTP/2
HTTP/2
chrome://net-internals
Wireshark
HTTP/1 HTTP/2
>>
>>
Part V HTTP2
Is TLS Fast Yet?
https://istlsfastyet.com/
iana
RSA cloudflare
ECDHE cloudflare
TLS
TLS Caching
TLS Tickets
TLS Tickets
TLS
TLS False Start
TLS
ECC
ECC Elliptic Curve Cryptography
256 ECC Key 3072 RSA Key
OCSP Online Certificate Status Protocol
HSTS HTTP Strict Transport Security
strict-transport-security: max-age=16070400; includeSubDomains
SSL OpenSSL LibreSSL BoringSSL
- PC AES-GCM AES-NI CPU
- ChaCha20-Poly1305 ARM CPU
>>
TLS
HTTP/2
DNS
•
• dns-prefetch
•
CDN
•
• JS CSS HTML
• PngOut PngCrush JpegOptim GifSicle
• GZip
HTTP
• Expires / Cache-Control Last...
HTTP/2
- HTTP/2 TCP
- TCP CPU
- HTTP/2
- HTTP/2 TCP
-
- CPU
- HTTP/2 Server Push
-
-
HTTP/2
- IP
-
Server Push
- Cookie
- Cookie Push
Part VI HTTP2
HTTP/2
Pangolin H2C WEB
Web Server
Server Push
HTTP/2
10
HTTP/1.1 HTTP/2 Web
TCP
TCP Head of Line Blocking
TCP
HTTP/2
TCP
Google QUIC Quick UDP Internet Connections
QUIC
QUIC UDP TCP+TLS+SPDY
&&
Web
- Ilya Grigorik
-
HTTP
- David Gourley Brian Totty Marjorie Sayer Sailu Reddy Anshu Aggarwal
-
HTTP-2 is here, let'...
Nginx/H2O HTTP/2
Wireshark HTTP/2
HTTP/2
BoringSSL HTTPS
H2O Cache-Aware Server Push
TLS
HTTP/2
... ...
https://imququ.com
Thank You!
Q & A
quguangyu@gmail.com
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
HTTP2:新的机遇与挑战
Upcoming SlideShare
Loading in …5
×

HTTP2:新的机遇与挑战

16,349 views

Published on

360互联网技术训练营第四期:360与Facebook工程师畅聊大前端的第一个分享。

Published in: Technology
  • Be the first to comment

HTTP2:新的机遇与挑战

  1. 1. HTTP/2 https://imququ.com
  2. 2. 2008.4 ~ 2011.5 2011.8 ~ 360 360 https://imququ.com
  3. 3. Part I HTTP Hypertext Transfer Protocol
  4. 4. $> telnet igvita.com 80 Connected to 173.230.151.99 GET /archive Hypertext delivery with HTTP 0.9! - eom. (connection closed) HTTP 0.9 is the ultimate MVP - one line, plain-text “protocol” to test drive the “www idea”. HTTP 0.9 1991 / ASCII CRLF HTML
  5. 5. $> telnet ietf.org 80 Connected to 74.125.xxx.xxx GET /rfc/rfc1945.txt HTTP/1.0 User-Agent: CERN-LineMode/2.15 libwww/2.17b3 Accept: */* HTTP/1.0 200 OK Content-Type: text/plain Content-Length: 137582 Last-Modified: Wed, 1 May 1996 12:45:26 GMT Server: Apache 0.84 4 years of rapid iteration later… eom. (connection closed) HTTP 1.0 is an informational RFC - documents HTTP 1.0 1996
  6. 6. $> telnet google.com 80 Connected to 74.125.xxx.xxx GET /index.html HTTP/1.1 Host: website.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4)... (snip) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Cookie: __qca=P0-800083390... (snip) HTTP/1.1 200 OK Connection: keep-alive Transfer-Encoding: chunked Server: nginx/1.0.11 Content-Type: text/html; charset=utf-8 Date: Wed, 25 Jul 2012 20:23:35 GMT Expires: Wed, 25 Jul 2012 20:23:35 GMT Cache-Control: max-age=0, no-cache 100 <!doctype html> (snip) HTTP 1.1 1999 Connection: keep-alive Transfer-Encoding: chunked Accept-Ranges
  7. 7. HTTP 1.1 2014 RFC2616 - Hypertext Transfer Protocol -- HTTP/1.1 RFC7230 - HTTP/1.1: Message Syntax and Routing - low-level message parsing and connection management RFC7231 - HTTP/1.1: Semantics and Content - methods, status codes and headers RFC7232 - HTTP/1.1: Conditional Requests - e.g., If-Modified-Since RFC7233 - HTTP/1.1: Range Requests - getting partial content RFC7234 - HTTP/1.1: Caching - browser and intermediary caches RFC7235 - HTTP/1.1: Authentication - a framework for HTTP authentication ✗ ✔
  8. 8. SPDY ? 2012 - 2015
  9. 9. Part II HTTP/1
  10. 10. Web ... Web Web SPA
  11. 11. HttpArchive Web ... ~2000 KB
 ~100 ~17 ~50
  12. 12. ● Cable profile (5Mbps / 28 ms RTT) ● Main thread attributionin Blink o Measured via Telemetry ● 69.5% of time blocked on network ● 6.6% of time blocked JavaScript ● 5.1% blocked on Layout ● 4.5% blocked on Paint ● ... No surprises here... First page load is network (latency) bound! TOP 1M Alexa Sites
  13. 13. HTTP - TCP /
  14. 14. Keep-Alive TCP ✗
  15. 15. Pipelining
  16. 16. RFC2616 2 RFC7230 6
  17. 17. • Batch Ajax Request • CSS Sprite • CSS JS Concatenation • CSS JS Inline • Data URI • ... ...
  18. 18. TCP / - TCP 6 - DNS TCP TCP - - HTTP - - Cookie-Less - CSS JS -
  19. 19. HTTP/1 HTTP/1 HTTP/2
  20. 20. Part III HTTP2
  21. 21. HTTP/2 RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) RFC 7541 - HPACK: Header Compression for HTTP/2
  22. 22. HTTP/2 TCP => Stream - Multiplexed - Prioritized - Prioritization - Flow control - Server Push Header Compression HPACK
  23. 23. =>
  24. 24. =>
  25. 25. Server Push ClientServer PUSH_PROMISE
  26. 26. HPACK header compression ● Literal values are (optionally) encoded with a static Huffman code ● Previously sent values are (optionally) indexed ○ e.g. “2” in above example expands to “method: GET” HTTP/1
  27. 27. ↓~54%
  28. 28. ↓~90%
  29. 29. Part IV HTTP2
  30. 30. Web Server >>
  31. 31. CanIUse *Only Win10
  32. 32. HTTP/2 HTTP/2
  33. 33. H2C HTTP/2 Cleartext Firefox Chrome Safari IE Edge H2C
  34. 34. Chrome HTTPS 2015 8 Chrome HTTPS 63%
  35. 35. HTTPS
  36. 36. HTTP Chrome HTTPS API
  37. 37. ALPN
  38. 38. HTTP/2 HTTP/2
  39. 39. Chrome FireFox
  40. 40. HTTP/2 HTTP/2 HTTP/2
  41. 41. chrome://net-internals
  42. 42. Wireshark
  43. 43. HTTP/1 HTTP/2
  44. 44. >>
  45. 45. >>
  46. 46. Part V HTTP2
  47. 47. Is TLS Fast Yet? https://istlsfastyet.com/
  48. 48. iana
  49. 49. RSA cloudflare
  50. 50. ECDHE cloudflare
  51. 51. TLS
  52. 52. TLS Caching
  53. 53. TLS Tickets
  54. 54. TLS Tickets
  55. 55. TLS
  56. 56. TLS False Start
  57. 57. TLS
  58. 58. ECC ECC Elliptic Curve Cryptography 256 ECC Key 3072 RSA Key
  59. 59. OCSP Online Certificate Status Protocol
  60. 60. HSTS HTTP Strict Transport Security strict-transport-security: max-age=16070400; includeSubDomains
  61. 61. SSL OpenSSL LibreSSL BoringSSL - PC AES-GCM AES-NI CPU - ChaCha20-Poly1305 ARM CPU
  62. 62. >> TLS
  63. 63. HTTP/2
  64. 64. DNS • • dns-prefetch • CDN • • JS CSS HTML • PngOut PngCrush JpegOptim GifSicle • GZip HTTP • Expires / Cache-Control Last-Modified / ETag
  65. 65. HTTP/2
  66. 66. - HTTP/2 TCP - TCP CPU - HTTP/2 - HTTP/2 TCP - - CPU - HTTP/2 Server Push - -
  67. 67. HTTP/2 - IP -
  68. 68. Server Push - Cookie - Cookie Push
  69. 69. Part VI HTTP2
  70. 70. HTTP/2 Pangolin H2C WEB
  71. 71. Web Server Server Push HTTP/2 10 HTTP/1.1 HTTP/2 Web
  72. 72. TCP TCP Head of Line Blocking TCP HTTP/2 TCP Google QUIC Quick UDP Internet Connections
  73. 73. QUIC QUIC UDP TCP+TLS+SPDY
  74. 74. && Web - Ilya Grigorik - HTTP - David Gourley Brian Totty Marjorie Sayer Sailu Reddy Anshu Aggarwal - HTTP-2 is here, let's optimize! - Velocity SC 2015 - Ilya Grigorik
  75. 75. Nginx/H2O HTTP/2 Wireshark HTTP/2 HTTP/2 BoringSSL HTTPS H2O Cache-Aware Server Push TLS HTTP/2 ... ... https://imququ.com
  76. 76. Thank You! Q & A quguangyu@gmail.com

×