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.

Introduction to HTTP/2

814 views

Published on

Introduction to HTTP/2, issues with HTTP 1.1, header compression, and troubleshooting with Wireshark

Published in: Technology
  • Be the first to comment

Introduction to HTTP/2

  1. 1. Introducing HTTP/2 Ido Flatow Senior Architect, Sela Group Microsoft RD & MVP
  2. 2. INTRODUCING HTTP/2 Agenda • Web (HTTP 1.1) and its current state • What is (HTTP/2) – and how fast is it? • Goals of HTTP/2 • HTTP/2 concepts • How to troubleshoot
  3. 3. INTRODUCING HTTP/2 Web – Current State • HTTP 1.1 is huge – HTTP 1.0 RFC 1945 – released 1996 – 60 pages – HTTP 1.1 RFC 2626 – released 1999 – 176 pages – Now split into 6 documents – RFC 7230 and family • Incomplete implementation of RFC – Eg. HTTP pipelining • Inadequate use of TCP
  4. 4. INTRODUCING HTTP/2 Transfer Size +300% in 4.5 Years • January 2012 – December 2016 (http://httparchive.org) top 1000 sites
  5. 5. INTRODUCING HTTP/2 Shortcoming – Current Web • Concurrent connection limit • Head of line blocking • TCP slow start • Latency – page load time
  6. 6. INTRODUCING HTTP/2 Max Persistent Connections • From HTTP 1.1 RFC: – “Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. … These guidelines are intended to improve HTTP response times and avoid congestion.” • Firefox 2 – 2 • Firefox 3 and on – 6 • Opera 9.26 – 4 • Opera 12 – 6 • Safari 3 – 4 • Safari 5 – 6 • IE 7 – 2 • IE 8 – 6 • IE 10 – 8 • Chrome – 6 Avg. TCP connections during page load (Last 24 months)
  7. 7. INTRODUCING HTTP/2 Head-of-Line Blocking (No Pipelining) • Each connection can only handle one request at a time • If current request blocks, next request will wait • HTTP 1.1 defines pipelining, but most browsers do not implement it
  8. 8. INTRODUCING HTTP/2 TCP Slow Start • TCP does not use the full bandwidth capacity from start • TCP probes network to find available capacity
  9. 9. INTRODUCING HTTP/2 Latency vs Bandwidth • Average web page has over 100 objects to download • Largest impact on page load time is latency, not bandwidth https://www.akamai.com/us/en/our-thinking/state-of-the-internet-report
  10. 10. INTRODUCING HTTP/2 What is 20ms of Latency? (RTT = Round-trip time)
  11. 11. INTRODUCING HTTP/2 What Have we Done to Improvise? • Reduce # of requests and latency overhead – Spriting – Concatenation/Bundling (JavaScript, CSS) – Inlining • Overcome max connection limit – Domain sharding
  12. 12. INTRODUCING HTTP/2 Spriting .d1, .d2, .d3, .d4, .d5, .d6, .d7 { background:transparent url("dir_sprite.png") no-repeat 4px 0; } .d2 {background-position:4px -36px;} .d3 {background-position:4px -74px;}
  13. 13. INTRODUCING HTTP/2 Concatenation and Inlining • Join multiple script/style files into a single resource • Embed JavaScript and CSS within the page • Inline images in CSS or HTML using data URIs (Base64 encoding) <img src="data:image/gif; base64,R0lGODlhAQABAIAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" alt="1x1 transparent (GIF) pixel" />
  14. 14. INTRODUCING HTTP/2 Domain Sharing • Work around the max connection restriction • Minimal overhead for DNS lookup
  15. 15. INTRODUCING HTTP/2 Problems with “optimizations” • Spriting – Painful and annoying preprocessing, cache invalidations, slower executions • Inlining – Resource can’t be cached, inflates parent document by 33% overhead • Concatenation – Less modular code, expensive cache invalidators, slower execution • Domain sharding – TCP slowstart, excessive DNS lookup, latency
  16. 16. INTRODUCING HTTP/2 HTTP/2 to the Rescue • Improve latency and less RTT sensitive • Fix pipelining and remove “head of line blocking” • Does not require multiple connections • Achieved all this by retaining semantics of HTTP 1.1
  17. 17. INTRODUCING HTTP/2 It Began with SPDY • Originally proposed by Google as a wire format extension to HTTP in 2011 • Implements all the major features of HTTP/2 • Serves as a testbed for improvements to HTTP – Without the burden of standardization • SPDY became the basis of HTTP/2 in 2012 • Chrome stopped using SPDY in May 2016
  18. 18. INTRODUCING HTTP/2 What is HTTP/2 • HTTP/2 uses a single, multiplexed connection – Max connection limit per domain can be ignored • HTTP/2 compresses header data and sends it in a concise, binary format – Better than the plain text format used previously • Less need for popular HTTP 1.1 optimizations
  19. 19. INTRODUCING HTTP/2 HTTP/2 Specification • Started with SPDY - draft 3 • Comprised out of two specifications – HTTP/2 – RFC7540 – HPACK (header compression) – RFC7541 • Implementations – HTTP/2 over TLS (h2) – HTTP/2 over TCP (h2c)
  20. 20. INTRODUCING HTTP/2 HTTP/2 Over TLS (h2) • HTTP/2 shipped with TLS as optional • Firefox and Chrome developer teams stated they will only implement HTTP/2 over TLS • Today, only HTTPS:// is allowed for HTTP/2 • TLS must be at least v1.2, with cipher suite restrictions https://http2.github.io/http2-spec/#BadCipherSuites
  21. 21. INTRODUCING HTTP/2 HTTP/2 in One Slide • One TCP connection • Request → Stream – Streams are multiplexed – Streams are prioritized • Binary framing layer – Prioritization – Flow control – Server push • Header compression (HPACK)
  22. 22. INTRODUCING HTTP/2 TCP Connections - HTTP 1.1 vs HTTP/2 • HTTP 1.1 • HTTP/2 Client http://www.url.com Client http://www.url.com
  23. 23. INTRODUCING HTTP/2 DEMO
  24. 24. INTRODUCING HTTP/2 Am I Using HTTP/2?
  25. 25. INTRODUCING HTTP/2 HTTP/2 Support • Servers – Microsoft IIS 10 (Win 10 / Server 2016) – Apache 2.4.12 – Nginx 1.9.5 – Jetty 9.3 – Many more… • Browsers – Edge – IE11 (Windows 10) – Firefox 40+ – Chrome 43+ – Safari 9+ – Opera 32+ – iOS Safari 9.1+ – Chrome for Android 46+ – CURL Google, Facebook, Twitter and many more are using HTTP/2 already HTTP/2 is used by 11.9% of all websites (Jan. 2017 http://w3techs.com)
  26. 26. INTRODUCING HTTP/2 HTTP/2 Multiplexing • Each request/response stream has an ID • Streams comprise of frames (Header, Data…) • TCP connection can have multiple streams • Frames can be interleaved in the TCP channel • Stream dependencies control frame prioritization • Server (IIS/ASP.NET) sees streams as TCP connections
  27. 27. INTRODUCING HTTP/2 Frame Types Frame type Description DATA HTTP body HEADERS Header fields PRIORITY Sender-advised priority of stream RST_STREAM Signal termination of stream SETTINGS Configuration parameters for the connection PUSH_PROMISE Signal a promise (push) of referenced sources PING Measure roundtrip time and “liveness” GOAWAY Inform peer to stop creating streams for current connection WINDOW_UPDATE Connection flow control CONTINUATION Continue a segment of header block fragments
  28. 28. INTRODUCING HTTP/2 Header Compression (HPACK)
  29. 29. INTRODUCING HTTP/2 DEMO
  30. 30. INTRODUCING HTTP/2 How to Troubleshoot - Chrome • Net Internals console in Chrome • chrome://net-internals/#http2
  31. 31. INTRODUCING HTTP/2 How to Troubleshoot - Wireshark • Export symmetric session keys to a file • Load it with Wireshark – Preferences->Protocols->SSL • Works with Chrome and Firefox C:> set SSLKEYLOGFILE = %userprofile%desktopsslkeylog.log $ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log
  32. 32. INTRODUCING HTTP/2 How to Troubleshoot - Wireshark
  33. 33. INTRODUCING HTTP/2 How to Troubleshoot - Wireshark
  34. 34. INTRODUCING HTTP/2 How to Troubleshoot - Wireshark
  35. 35. INTRODUCING HTTP/2 DEMO
  36. 36. INTRODUCING HTTP/2 Server Push (Promise) • After the server responds with an HTML, it waits for requests to embedded resources • Server code knows which resources client needs – JavaScript – CSS – Images – HTML pages of future navigation • Why not just push it to the client along with the HTML? • In ASP.NET, use HttpResponse.PushPromise string path = Request.ApplicationPath; Response.PushPromise(path + "/Images/1.png"); Response.PushPromise(path + "/Images/2.png");
  37. 37. INTRODUCING HTTP/2 DEMO
  38. 38. INTRODUCING HTTP/2 Summary • Multiplexing – Multiple requests and responses – Fixes head-of-line blocking problem – Avoid the HTTP 1.1 hacks – Mechanism for request prioritization • Fewer TCP connections – Reduces TCP slow start • Header compression • Server Push
  39. 39. INTRODUCING HTTP/2 Resources • https://http2.github.io/faq • http://daniel.haxx.se/http2/http2-v1.10.pdf • https://tools.ietf.org/html/rfc7540 • http://blogs.iis.net/davidso/http2 • http://blogs.msdn.com/b/webdev/archive/2015/04/30/updates- for-asp-net-4-6-web-forms-mvc-5-web-api-2.aspx @IdoFlatow // idof@sela.co.il // www.idoflatow.net/downloads

×