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

HTTP/2 is here, now let's make it easy

HTTP/2 is here, now let's make it easy

Members of the front-end community are among the most likely to champion HTTP/2. The spec may be finalized, but HTTP/2 is incomplete without a developer ecosystem to support it.

Presented at DotJS in Paris.

Rebecca Murphey

December 07, 2015
Tweet

More Decks by Rebecca Murphey

Other Decks in Technology

Transcript

  1. http/2 is here, let’s optimize
    now let’s make it easy
    Rebecca Murphey / DotJS 2015 / Paris

    View full-size slide

  2. http/2
    one connection 

    per host* handles 

    all requests
    server push 

    (no more inlining!)
    prioritization
    https required 

    by browsers
    * through connection coalescing,
    hosts that resolve to the same IP can
    share the same connection

    View full-size slide

  3. Designed for the web that is, 

    not for the web that was.

    View full-size slide

  4. There’s a lot we still don’t know
    about how HTTP/2 should work
    in the real world.

    View full-size slide

  5. How will servers support HTTP/2?

    View full-size slide

  6. How a web server determines what a 

    client needs before the client knows

    is seriously challenging, especially for 

    general-purpose web servers which need to allow
    site owners to tune certain aspects for best
    performance and reliability. The heuristics for
    determining what to push vary.
    https://caddyserver.com/blog/implementing-http2-isnt-trivial

    View full-size slide

  7. link: ; 

    rel=preload; 

    rel=preload; 

    rel=preload; 

    rel=preload

    View full-size slide

  8. How will servers support HTTP/2?

    View full-size slide

  9. How will we visualize HTTP/2 connections?

    View full-size slide





  10. separate


    <br/>setTimeout(function () {<br/>var s = document.createElement('script');<br/>s.src = "/common/libs/combined.js";<br/>document.body.appendChild(s);<br/>}, 200);<br/>



    /index.html?push=/common/libs/combined.js

    View full-size slide

  11. push starts: 96ms
    all data sent: 366ms
    push accepted: 500ms

    View full-size slide

  12. $ npm install chrome-http2-log-parser

    View full-size slide

  13. How will we visualize HTTP/2 connections?

    View full-size slide

  14. How will my app work with HTTP/2?

    View full-size slide

  15. grunt build:http2
    grunt build:http1

    View full-size slide

  16. How should my app work with HTTP/2?

    View full-size slide

  17. Why does all of this matter?

    View full-size slide

  18. Members of the front-end community
    are among the most likely to champion
    HTTP/2.
    The spec may be finalized, but HTTP/2
    is incomplete without a developer
    ecosystem to support it.

    View full-size slide

  19. bit.ly/http2-make-it-easy
    @rmurphey

    View full-size slide