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.

B32443719f266e1da10dc301688642b4?s=128

Hector Castro

May 03, 2016
Tweet

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

  2. HTTP/2: PIPELINE BLING I know when that pipeline bling, that

    can only mean one thing
  3. None
  4. HTTP/1 Hypertext Transfer Protocol Version 1

  5. Presentation Session Transport Network Data link Physical Application

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

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

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

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

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

    TLS }TCP
  11. Initiator Listener

  12. Initiator Listener SYN SYN-ACK

  13. Initiator Listener SYN SYN-ACK ACK { TCP

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

    TCP
  15. Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certificate ServerHelloDone ClientKeyExchange

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

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

    ChangeCipherSpec Finished ChangeCipherSpec Finished { TCP { TLS
  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.
  19. Presentation Session Transport Network Data link Physical Application }HTML }HTTP,

    TLS }TCP
  20. Client Server

  21. Client Server GET / index.html

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

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

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

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

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

    logo.png
  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!
  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
  29. Client Server GET / index.html GET /main.js main.js GET /main.css

    main.css
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. ~6 Connections per origin

  37. ~17 Connections per page

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

  39. None
  40. HACKS Things engineers do to reduce request counts

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

    5px 25px; }
  43. None
  44. grunt.initConfig({ concat: { options: { separator: ';', }, dist: {

    src: ['src/intro.js', 'src/project.js', 'src/outro.js'], dest: 'dist/built.js', }, }, });
  45. None
  46. HTTP/2 Hypertext Transfer Protocol Version 2

  47. HPACK Header compression for HTTP/2

  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
  49. :method: GET :scheme: http :host: jobs.azavea.com :path: / referer: http://www.azavea.com/

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

    referer: http://jobs.azavea.com/
  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/ … … …
  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
  53. “/logo.png” = 9 characters * 8 bits = huffman(“/logo.png”) =

    6 + 5 + 6 + 5 + 6 + 6 + 6 + 6 = 72 bits 46 bits
  54. None
  55. MULTIPLEXING Sending multiple HTTP requests via a single TCP connection

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

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

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

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

    … stream/3 DATA
  60. None
  61. SERVER PUSH Preemptively push responses to a client in association

    with a previous request
  62. Client Server

  63. Client Server GET / index.html

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

  65. None
  66. 2.4.17+ 1.9.5+

  67. None
  68. None
  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