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
2. HTTP/2: PIPELINE BLING I know when that pipeline bling, that can only mean one thing
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
36. ~6 Connections per origin
37. ~17 Connections per page
38. ~124 Alexa 1000 average requests per page in 2016 http://httparchive.org/
40. HACKS Things engineers do to reduce request counts
42. li { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAO...) no-repeat left center; padding: 5px 0 5px 25px; }
44. grunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['src/intro.js', 'src/project.js', 'src/outro.js'], dest: 'dist/built.js', }, }, });
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
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
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
66. 2.4.17+ 1.9.5+
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