HTTP/2: The Weird Parts

Slide 1

Slide 1 text

HTTP/2: The Weird Parts @smithclay / New Relic ScotlandJS 2016

Slide 2

Slide 2 text

ScotlandJS 2016 @smithclay / New Relic What this talk isn't about • Code • Implementing HTTP/2 in Production • How HTTP/2 will totally, absolutely solve every performance problem (it won't). • H2 = HTTP/2

Slide 3

Slide 3 text

ScotlandJS 2016 @smithclay / New Relic Me Server HTTP San Francisco Northern Virginia

Slide 4

Slide 4 text

ScotlandJS 2016 @smithclay / New Relic Me HTTP Server San Francisco Northern Virginia Person Paris HTTP

Slide 5

Slide 5 text

ScotlandJS 2016 @smithclay / New Relic Me ~40 ms roundtrip* Server San Francisco Northern Virginia Person Paris ~ 88ms roundtrip* *http://www.timbercon.com/time-delay-of-light-in-ﬁber-calculator/ *calculated using great-circle distance in ﬁber (not real life)

Slide 6

Slide 6 text

ScotlandJS 2016 @smithclay / New Relic More RTs, more latency Browser Server Data Transfer { Round trip 1. SYN 2. SYN/ACK 3. ACK { { TLS Full TCP + TLS (i.e. HTTPS) handshake TCP Handshake Cool TLS Demo: https://tls.openmirage.org/

Slide 7

Slide 7 text

ScotlandJS 2016 @smithclay / New Relic http://httparchive.org/trends.php?s=All&minlabel=May+15+2014&maxlabel=May+15+2016#_connections 2014 2016

Slide 8

Slide 8 text

ScotlandJS 2016 @smithclay / New Relic http://httparchive.org/trends.php?s=All&minlabel=May+15+2014&maxlabel=May +15+2016#numDomains&maxDomainReqs 2014 2016

Slide 9

Slide 9 text

Making things better with HTTP/2

Slide 10

Slide 10 text

ScotlandJS 2016 @smithclay / New Relic

Slide 11

Slide 11 text

ScotlandJS 2016 @smithclay / New Relic HTTP/2 has 10 frame types FRAME FRAME FRAME FRAME FRAME FRAME FRAME Stream 0 Stream 1 Stream 2 Frames get reassembled into standard request/response messages

Slide 12

Slide 12 text

ScotlandJS 2016 @smithclay / New Relic Front-end implications* Ciao Concatenation Sianara Sharding and Spriting Bye Inlining *Assuming most of your trafﬁc has HTTP/2 capable browsers. https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/

Slide 13

Slide 13 text

The Weird Frames

Slide 14

Slide 14 text

ScotlandJS 2016 @smithclay / New Relic PUSH_PROMISE FRAME • Not websockets replacement. • Intention to send responses. • https://www.w3.org/TR/ preload/#server-push-http-2 HTTP Request Precognition YOU WILL WANT THIS

Slide 15

Slide 15 text

ScotlandJS 2016 @smithclay / New Relic GOAWAY FRAME • Terminates the TCP connection. • Helps clients know what streams might not be processed. NO THANKS

Slide 16

Slide 16 text

ScotlandJS 2016 @smithclay / New Relic PING FRAME • Safely tests the connection without a request. • "A mechanism for measuring a minimal round-trip time from the sender, as well as determining whether an idle connection is still functional." STILL THERE?

Slide 17

Slide 17 text

More frame types to come... https://tools.ietf.org/wg/httpbis/

Slide 18

Slide 18 text

ScotlandJS 2016 @smithclay / New Relic Takeaways Measure & Profile* Reduce Connections Design for latency CDNs: close to your users *http://wireshark.com/ https://mitmproxy.org/

Slide 19

Slide 19 text

ScotlandJS 2016 @smithclay / New Relic #perfforthepeople

Slide 20

Slide 20 text

Thanks @smithclay / New Relic ScotlandJS 2016

Slide 21

Slide 21 text

ScotlandJS 2016 @smithclay / New Relic Additional information • Go read High Performance Browser Networking (it's great). • https://daniel.haxx.se/http2/ • https://newrelic.com/browser • https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web- services-experiences-and-observations/ • http://engineering.khanacademy.org/posts/js-packaging-http2.htm • https://blog.newrelic.com/2016/02/09/http2-best-practices-web- performance/