Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2: The Weird Parts

HTTP/2: The Weird Parts

Clay Smith

June 03, 2016
Tweet

More Decks by Clay Smith

Other Decks in Programming

Transcript

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

    View Slide

  2. 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

    View Slide

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

    View Slide

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

    View Slide

  5. 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-fiber-calculator/
    *calculated using great-circle distance in fiber (not real life)

    View Slide

  6. 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/

    View Slide

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

    View Slide

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

    View Slide

  9. Making things better
    with HTTP/2

    View Slide

  10. ScotlandJS 2016 @smithclay / New Relic

    View Slide

  11. 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

    View Slide

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

    View Slide

  13. The Weird Frames

    View Slide

  14. 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

    View Slide

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

    View Slide

  16. 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?

    View Slide

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

    View Slide

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

    View Slide

  19. ScotlandJS 2016 @smithclay / New Relic
    #perfforthepeople

    View Slide

  20. Thanks
    @smithclay / New Relic
    ScotlandJS 2016

    View Slide

  21. 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/

    View Slide