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

HTTP2: Pipeline Bling

HTTP2: Pipeline Bling

Despite the major version change, HTTP/2 is not a ground-up rewrite of the HTTP protocol. In fact, HTTP/2 preserves the concept of HTTP headers, methods, and status codes. HTTP/2 refines how HTTP is expressed on the wire to help reduce end-user perceived latency.

In this talk we’ll explore the changes introduced by HTTP/2 and identify areas where it can be applied today. Finally, we'll cover common hacks around HTTP/1.x that simply go away as a result of adopting HTTP/2.

Hector Castro

May 03, 2016
Tweet

More Decks by Hector Castro

Other Decks in Technology

Transcript

  1. 1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING

    View Slide

  2. HTTP/2: PIPELINE BLING
    I know when that pipeline bling, that can only mean one thing

    View Slide

  3. View Slide

  4. HTTP/1
    Hypertext Transfer Protocol Version 1

    View Slide

  5. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application

    View Slide

  6. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML

    View Slide

  7. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML
    }HTTP, TLS

    View Slide

  8. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML
    }HTTP, TLS
    }TCP

    View Slide

  9. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML
    }HTTP, TLS
    }TCP

    View Slide

  10. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML
    }HTTP, TLS
    }TCP

    View Slide

  11. Initiator Listener

    View Slide

  12. Initiator Listener
    SYN
    SYN-ACK

    View Slide

  13. Initiator Listener
    SYN
    SYN-ACK
    ACK
    {
    TCP

    View Slide

  14. Initiator Listener
    SYN
    SYN-ACK
    ACK
    ClientHello ServerHello
    Certificate
    ServerHelloDone
    {
    TCP

    View Slide

  15. Initiator Listener
    SYN
    SYN-ACK
    ACK
    ClientHello ServerHello
    Certificate
    ServerHelloDone
    ClientKeyExchange
    ChangeCipherSpec
    Finished
    {
    TCP
    {
    TLS

    View Slide

  16. Initiator Listener
    SYN
    SYN-ACK
    ACK
    ClientHello ServerHello
    Certificate
    ServerHelloDone
    ClientKeyExchange
    ChangeCipherSpec
    Finished ChangeCipherSpec
    Finished
    {
    TCP
    {
    TLS

    View Slide

  17. Initiator Listener
    SYN
    SYN-ACK
    ACK
    ClientHello ServerHello
    Certificate
    ServerHelloDone
    ClientKeyExchange
    ChangeCipherSpec
    Finished ChangeCipherSpec
    Finished
    {
    TCP
    {
    TLS

    View Slide

  18. Initiator Listener
    SYN
    SYN-ACK
    ACK
    ClientHello ServerHello
    Certificate
    ServerHelloDone
    ClientKeyExchange
    ChangeCipherSpec
    Finished ChangeCipherSpec
    Finished
    {
    TCP
    {
    TLS
    Finally, we can start
    our HTTP request.

    View Slide

  19. Presentation
    Session
    Transport
    Network
    Data link
    Physical
    Application
    }HTML
    }HTTP, TLS
    }TCP

    View Slide

  20. Client Server

    View Slide

  21. Client Server
    GET /
    index.html

    View Slide

  22. Client Server
    GET /
    index.html
    GET /main.css

    View Slide

  23. Client Server
    GET /
    index.html
    GET /main.css
    main.css

    View Slide

  24. Client Server
    GET /
    index.html
    GET /main.css
    main.css
    GET /logo.png

    View Slide

  25. Client Server
    GET /
    index.html
    GET /main.css
    main.css
    GET /logo.png
    logo.png

    View Slide

  26. Client Server
    GET /
    index.html
    GET /main.css
    main.css
    GET /logo.png
    logo.png

    View Slide

  27. Client Server
    GET /
    index.html
    GET /main.css
    main.css
    GET /logo.png
    logo.png
    Still need to get all
    of the other assets!

    View Slide

  28. Client Server
    GET /
    index.html
    GET /main.css
    main.css
    GET /logo.png
    logo.png
    Still need to get all
    of the other assets!
    1s

    View Slide

  29. Client Server
    GET /
    index.html
    GET /main.js
    main.js
    GET /main.css
    main.css

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. ~6
    Connections per origin

    View Slide

  37. ~17
    Connections per page

    View Slide

  38. ~124
    Alexa 1000 average requests per page in 2016
    http://httparchive.org/

    View Slide

  39. View Slide

  40. HACKS
    Things engineers do to reduce request counts

    View Slide

  41. View Slide

  42. li {
    background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAO...)
    no-repeat
    left center;
    padding: 5px 0 5px 25px;
    }

    View Slide

  43. View Slide

  44. grunt.initConfig({
    concat: {
    options: {
    separator: ';',
    },
    dist: {
    src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
    dest: 'dist/built.js',
    },
    },
    });

    View Slide

  45. View Slide

  46. HTTP/2
    Hypertext Transfer Protocol Version 2

    View Slide

  47. HPACK
    Header compression for HTTP/2

    View Slide

  48. Index Header Name Header Value
    1 :authority
    2 :method GET
    3 :method POST
    4 :path /
    5 :path /index.html
    6 :scheme http
    7 :scheme https
    8 :status 200
    … … …
    60 via
    61 www-authenticate

    View Slide

  49. :method: GET
    :scheme: http
    :host: jobs.azavea.com
    :path: /
    referer: http://www.azavea.com/
    accept-encoding: gzip

    View Slide

  50. :method: GET
    :scheme: http
    :host: jobs.azavea.com
    accept-encoding: gzip
    :path: /logo.png
    referer: http://jobs.azavea.com/

    View Slide

  51. Index Header Name Header Value
    62 :host jobs.azavea.com
    63 :referer http://www.azavea.com/
    64 :path /logo.png
    65 :referer
    http://jobs.azavea.com/
    … … …

    View Slide

  52. Symbol Code as Bits Length in Bits
    / 011000 6
    l 101000 6
    o 00111 5
    g 100110 6
    . 010111 6
    p 101011 6
    n 101010 6

    View Slide

  53. “/logo.png” = 9 characters * 8 bits
    =
    huffman(“/logo.png”) = 6 + 5 + 6 + 5 + 6 + 6 + 6 + 6
    =
    72 bits
    46 bits

    View Slide

  54. View Slide

  55. MULTIPLEXING
    Sending multiple HTTP requests via a single TCP connection

    View Slide

  56. Client Server
    stream/1
    DATA
    stream/2
    HEADERS
    stream/2
    DATA
    stream/1
    DATA

    stream/3
    DATA

    View Slide

  57. Client Server
    stream/1
    DATA
    stream/2
    HEADERS
    stream/2
    DATA
    stream/1
    DATA

    stream/3
    DATA

    View Slide

  58. Client Server
    stream/1
    DATA
    stream/2
    HEADERS
    stream/2
    DATA
    stream/1
    DATA

    stream/3
    DATA

    View Slide

  59. Client Server
    stream/1
    DATA
    stream/2
    HEADERS
    stream/2
    DATA
    stream/1
    DATA

    stream/3
    DATA

    View Slide

  60. View Slide

  61. SERVER PUSH
    Preemptively push responses to a client in association with a previous request

    View Slide

  62. Client Server

    View Slide

  63. Client Server
    GET /
    index.html

    View Slide

  64. Client Server
    GET /
    index.html
    main.css
    logo.png

    View Slide

  65. View Slide

  66. 2.4.17+ 1.9.5+

    View Slide

  67. View Slide

  68. View Slide

  69. 1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING
    1-800-PIPELINEBLING

    View Slide