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.

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