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.

Http2 is here! And why the web needs it

653 views

Published on

Presented at the IndicThreads.com Software Development Conference 2016 held in Pune, India. More at http://www.IndicThreads.com and http://Pune16.IndicThreads.com


--

Published in: Software
  • Be the first to comment

Http2 is here! And why the web needs it

  1. 1. HTTP/2 is here! And why the web needs it Nilesh Naik Tata Consultancy Services
  2. 2. • How we got there • Limitations of HTTP/1.1 • What’s new in HTTP/2 • Best practices of today are anti-patterns in HTTP/2 • Impact on developer community • Current implementations • What’s next What’s in here -
  3. 3. The web has changed significantly since then 1991 HTTP/0.9 1996 HTTP/1.0 1999 HTTP/1.1 2015 HTTP/2 HTTP Timeline 2009 SPDY
  4. 4. HTTP 0.9 (1991) GET /index.htm <html> <head> …. </head> <body> … </body> </html>
  5. 5. HTTP 1.0 (1996) GET /index.htm HTTP/1.0 User-Agent: mozilla Accept: text/html HTTP/1.0 200 OK <html> <head> …. </head> <body> … </body> </html>
  6. 6. HTTP 1.1 (1999) GET /index.htm HTTP/1.0 User-Agent: mozilla Accept: text/html Connection: keep-alive HTTP/1.0 200 OK <html> <head> …. </head> <body> … </body> </html>
  7. 7. First Web Page
  8. 8. Early 90’s – McDonald’s Single Request – Response model Not much interaction
  9. 9. MSN
  10. 10. Early 90’s  Most of the content was sent in response to single request  Minimal or no JS
  11. 11. Modern Web page - Amazon - 308 requests, 8.1 MB data
  12. 12. Modern Web page  External resources requested  Multiple requests, Multiple response
  13. 13. Modern Web page - Ads Much of the site isnt about content, its about Ads.
  14. 14. HTTP abused!
  15. 15. And yes, every TCP connection is closed with a 3-way connection too! Open connection: 3-way handshake SYN x= rand() SYN ACK X+1 y= rand() ACK x+1 y+1 Application Data 0 ms 28 ms 56 ms 84 ms
  16. 16.  More resource intensive than ever before  HTTP 1.1 was not built to handle that kind of load  HTTP 1.1 does not use TCP optimally 800K Transfer size 2300K Transfer size 80 Objects 100 Objects In the last 4 years..
  17. 17. HTTP requests are expensive! Workarounds
  18. 18. SpritingSpriting
  19. 19. Spriting Text To get just one flag… Browser must download and encode the whole image Spriting
  20. 20. Spriting - Contd.  Makes development harder  Impacts caching  Every change would require a fresh download  Larger files takes longer to download and display on browser
  21. 21. Inlining Resources
  22. 22. Inlining – Contd.  data: urls instead of sprites  Resources can’t be cached independently  Development isn't easy
  23. 23. Concatenation Merge multiple JavaScript/CSS files into one BIG file Larger files to download and parse
  24. 24. Larger files to download and parse Whole bundle is invalidated if a single file changes Concatenation – contd.  Too much data when only a little is needed  Too much to reload when a change is needed  Annoyance for developers  Impacts caching
  25. 25. Domain sharding Browsers use 6-8 connections per host
  26. 26. Domain sharding – contd. Sites use many host names to allow more connection
  27. 27. Domain sharding on Single Server domain.com/index.html images.domain.com/image.png styles.domain.com/styles.css
  28. 28. Domain sharding – bbc.co.uk www.bbc.co.uk static.bbc.co.uk nav.files.bbci.co.uk homepage.files.bbci.co.uk  Still suffers from head of blocking  Every new connection takes up resources  Every new host needs a name lookup *http://yslow.org/
  29. 29.  Useful, but are really just Band-aids  Annoying for the developers  Adds a layer of tools  Hampers caching  Downloads too much Hacks
  30. 30. Ideal Protocol Interaction  Send minimal data to the server  Download minimal data needed  Extra data -> more time to transfer, adds latency (especially on mobile networks)
  31. 31. HTTP/1.1  HTTP/1.x is “chatty”  Several round-trips, adds latency
  32. 32. Latency vs Bandwidth
  33. 33. Announced in 2009 Target 50% reduction in PLT Initial tests - 55% faster On track to de facto standard
  34. 34. Enter HTTP/2 - RFC 7540  Built on top of SPDY  One TCP Connection  Improved end-user perceived latency  Binary framing layer
  35. 35. Enter HTTP/2
  36. 36. Connection Stream DATA HEADER Request message Response message HEADER HEADERDATA Stream PRIORITY HEADER Request message Response message HEADER DATA …
  37. 37. An HTTP 1.x connection Response <HTML> <HEAD> -- </HEAD> <BODY> -- </BODY> </HEAD> Request GET /index.html HTTP 1.1 User-Agent: mozilla Accept: text/html TCP Connection
  38. 38. An HTTP/2 connection Response 0000100011 0110000100 0000100101 Request 000100010 100100100 001001000 TCP Connection
  39. 39. Demo • https://http2.akamai.com/demo
  40. 40. Multiplexing Head of Line Blocking No Queuing One connection Many requests Out of order interleaved HTTP/1.1 HTTP/2 Still serialized Long download/long think time can block other requests
  41. 41. Multiplexing – contd.
  42. 42. Multiplexing – network graph
  43. 43. Header Compression  Unnecessary metadata (headers) add up quickly  100+ requests, with few KB of headers -> hundreds of KB’s!  Bytes are slow and expensive to transfer
  44. 44. Header Duplication
  45. 45. Header Duplication – contd.
  46. 46. Header Duplication – contd.
  47. 47. Header Duplication – contd.
  48. 48. Header Duplication – contd.  Four requests  2,596 bytes total  1,797 redundant bytes
  49. 49. HPACK – Header Compression - RFC 7541 Compresses Headers Avoids sending duplicated/repeated headers
  50. 50. Server push  Similar to Inlining  Resources pushed directly to client’s cache  Opportunity for servers to become smarter – Don’t push on every request – Push based upon observed traffic pattern Browser can reject push
  51. 51. Implementations  H2O  mod_h2 (Apache) Server push – Cache Digest Process request Digest of /main.js & /main.css <html> <script src="/main.js"> <link rel="stylesheet" href="/main.css"> <link rel=STYLESHEET href="/foo.css"> <body> … generated response …
  52. 52. Priortization – HTTP/1.x
  53. 53. Priortization – HTTP/1.x In HTTP/1, Prioritization is a browser heuristic • CSS and images first, followed by images
  54. 54. Priortization – HTTP/2
  55. 55. Priortization – HTTP/2 In HTTP/2, it’s hinted by the client, determined by the server
  56. 56. Stream Priority Stream Weight: <int> 1..256 • Lower the number, higher the priority
  57. 57. Stream Dependency Stream Root Weight: 15 Dependency: {Stream id} • Streams aren't isolated, they can be dependent on others • If no dependency then id set to zero.
  58. 58. Dependency Tree 5 5 7 4
  59. 59. HTTP/2 User Impact Faster page loads More response loading More HTTPS
  60. 60. Impact on developers
  61. 61. Does not modify the semantics
  62. 62. Uses binary format instead of text Debugging can be a problem No more telnet Why?
  63. 63. TLS Overhead • World is moving towards https already • ALPN makes impact minimal • Cost of certificates and administrative overhead
  64. 64. Browser support
  65. 65. Hosting .NET Apps IIS 10 on Windows 10 Windows Server 2016 Nginx
  66. 66. Hosting Java Apps Apache HTTP 2.4.17+ Jetty 9.3+ Tomcat 8.5
  67. 67. Hosting Node Apps node-http2 node-spdy ExpressJS 5.0
  68. 68. HTTP/2 on JVM JDK 8 and upwards required Include ALPN extensions in class path Included in JDK 9
  69. 69. Implementations https://github.com/http2/http2-spec/wiki/Implementations
  70. 70. HTTP/1.x workaround will hurt HTTP/2 perf Inlining Spriting Concatenating Sharding
  71. 71. Case study
  72. 72. What's next?
  73. 73. QUIC Runs on top of UDP Goodness of SPDY and HTTP/2 No head of line blocking in QUIC! QUIC TCP + TLS New connection 100 ms Repeat connnection 0 ms RTT New connection 300 ms Repeat connection 200 ms RTT
  74. 74. Thank you! @NileshRaviNaik

×