HTTP/2 -- the future of WWW
0 likes8,511 views
The document discusses HTTP/2 and its improvements over HTTP/1.1 for website performance. Some key points covered include using a single connection with HTTP/2 to eliminate domain sharding and asset concatenation issues. It also notes that server push is better than resource inlining. The document concludes by addressing questions about learning more about HTTP/2 and the future of HTTP/1.1 versus HTTP/2 adoption.
![=======================================
=======================================
0100110101011001011
client server
[ 0%]](https://image.slidesharecdn.com/http2-160225200027/85/HTTP-2-the-future-of-WWW-10-320.jpg)
![1 bandwidth
[Mbps]
2 3 4 5 6 7 8 9
2500
2000
1000
1500
3000
page
load time
[ms]
page load time
vs increasing bandwidth](https://image.slidesharecdn.com/http2-160225200027/85/HTTP-2-the-future-of-WWW-20-320.jpg)
![page load time
vs decreasing latency
180 latency
[ms]
140 100 60 20
2500
2000
1000
1500
3000
page
load time
[ms]](https://image.slidesharecdn.com/http2-160225200027/85/HTTP-2-the-future-of-WWW-21-320.jpg)
HTTP/2 -- the future of WWW
- 2. HTTP 2.0 the future of WWW @tkaczmarzyk blog.kaczmarzyk.net Tomek Kosior Kaczmarzyk
- 3. HTTP 2.0 the future of WWW @tkaczmarzyk blog.kaczmarzyk.net Tomek Kosior Kaczmarzyk HTTP/2
- 4. About me Just wandering around the world, developing software :) I co-organize FB/konferencjaboilingfrogs
- 5. The plan 1. Introductioo0000oo00on 2. HTTP/2 in a nutshell 3. Performance of browser networking 4. Questions
- 6. c = 299 792 458 m/s Achievement unlocked! Tribute
- 14. SYN
- 15. SYN-ACK
- 16. ACK
- 20. 1 bandwidth [Mbps] 2 3 4 5 6 7 8 9 2500 2000 1000 1500 3000 page load time [ms] page load time vs increasing bandwidth
- 21. page load time vs decreasing latency 180 latency [ms] 140 100 60 20 2500 2000 1000 1500 3000 page load time [ms]
- 22. Have you ever? Achievement unlocked! Tribute
- 25. GET /resource HTTP/0.9 Host: example.org Accept: image/jpeg Server Client HTTP/0.9
- 26. HTTP/0.9 304 Not Modified ETag: "xyzzy" Expires: Thu, 23 Jan ... Server Client HTTP/0.9
- 29. GET /resource HTTP/1.0 Host: example.org Accept: image/jpeg Server Client HTTP/1.0
- 30. HTTP/1.0 304 Not Modified ETag: "xyzzy" Expires: Thu, 23 Jan ... Server Client HTTP/1.0
- 31. GET /resource2 HTTP/1.0 Host: example.org Accept: image/jpeg Server Client HTTP/1.0
- 32. HTTP/1.0 200 OK ETag: "xyzzy" ... Server Client HTTP/1.0
- 35. Server Client HTTP/1.1request1 request2 request3 !!! head of line blocking
- 36. Server Client multiple connections per browser session
- 37. Server Client
- 38. Server Client
- 43. SPDY
- 44. RFC 7540 HTTP/2 RFC 7541 HPACK
- 45. 1. Introductioo0000oo00on 2. HTTP/2 in a nutshell 3. Performance of browser networking 4. Questions The plan
- 52. Server Client single connection! stream 1 HEADERS stream 3 DATA stream 1 DATA stream 3 HEADERS stream 1 HEADERS stream 3 HEADERS
- 53. Server Client single connection! stream 1 HEADERS stream 3 DATA stream 1 DATA stream 3 HEADERS stream 5 HEADERS stream 5 DATA stream 5 DATA stream 7 HEADERS stream 1 HEADERS stream 3 HEADERS
- 58. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg
- 59. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HTTP/2
- 60. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2
- 61. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2 +END_STREAM +END_HEADERS
- 62. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2 +END_STREAM +END_HEADERS flags (binary header)
- 63. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2 +END_STREAM +END_HEADERS flags (binary header) host = example.org accept = image/jpeg
- 64. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2 +END_STREAM +END_HEADERS flags (binary header) :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg
- 65. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HEADERS HTTP/2 +END_STREAM +END_HEADERS :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg flags (binary header) pseudo headers
- 66. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg foo: bar cookie: a=b; e=f
- 67. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg foo: bar cookie: a=b; e=f HEADERS CONTINUATION -END_STREAM -END_HEADERS +END_STREAM +END_HEADERS :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg foo = bar cookie = a=b cookie = e=f HTTP/2
- 68. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg foo: bar cookie: a=b; e=f HTTP/2 HEADERS CONTINUATION -END_STREAM -END_HEADERS +END_STREAM +END_HEADERS :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg foo = bar cookie = a=b cookie = e=f mind the flags!
- 69. GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg foo: bar cookie: a=b; e=f HTTP/2 HEADERS CONTINUATION -END_STREAM -END_HEADERS +END_STREAM +END_HEADERS :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg foo = bar cookie = a=b cookie = e=f mind the flags! decomposed for cacheability
- 70. POST /resource HTTP/1.1 Host: example.org Accept: application/json foo: bar cookie: a=b; e=f { name: Homer }
- 71. POST /resource HTTP/1.1 Host: example.org Accept: application/json foo: bar cookie: a=b; e=f { name: Homer } HTTP/2 HEADERS DATA -END_STREAM +END_HEADERS +END_STREAM :method = POST :scheme = https :path = /resource host = example.org accept = app./json { name: Homer }
- 72. HPACK
- 73. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID...
- 74. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS
- 75. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS
- 76. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS 2 9 :host = example.org :path = /resource 1 cookie = JSESSION...
- 77. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS 2 9 :host = example.org :path = /resource 1 cookie = JSESSION...
- 78. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS 2 9 :host = example.org :path = /resource 1 cookie = JSESSION... Dynamic table 21 ... cookie JSESSION...
- 79. :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... Static table 1 2 9 ... ... usr-agent method scheme Chrome GET HTTPS 2 9 :host = example.org :path = /resource 1 21 Dynamic table 21 ... cookie JSESSION...
- 80. Static table Dynamic table :method = GET :scheme = HTTPS :host = example.org :path = /resource user-agent = Chrome... cookie = JSESSIONID... 1 2 9 ... ... 21 ... 2 9 :host = example.org :path = /resource 1 21 usr-agent method scheme Chrome GET HTTPS cookie JSESSION... +Huffman
- 81. server push
- 82. <html> <head> ... <link rel=stylesheet type=text/css href=... /> </head> <body> ... <img src=/slideshow/http2-the-future-of-www/58726706/.../> ... </body> </html>
- 84. Server Client
- 87. Server Client stream 2 PUSH_PROMISE (stylesheet) stream 4 PUSH_PROMISE (image) local cache stream 1 GET index.html
- 88. Server Client stream 2 PUSH_PROMISE (stylesheet) stream 4 PUSH_PROMISE (image) stream 1 HEADERS (index.html) stream 1 DATA (index.html) local cache stream 1 GET index.html
- 90. Server Client stream 2 PUSH_PROMISE (stylesheet) stream 4 PUSH_PROMISE (image) local cache GET stylesheet
- 91. Server Client stream 2 PUSH_PROMISE (stylesheet) stream 4 PUSH_PROMISE (image) local cache GET stylesheet
- 92. Jetty smart push GET index.html GET style.css GET script.js
- 93. Jetty smart push GET index.html GET style.css {Referer: /index.html} GET script.js {Referer: /index.html}
- 94. Jetty smart push GET index.html GET style.css {Referer: /index.html} GET script.js {Referer: /index.html}
- 95. Jetty smart push GET index.html GET style.css {Referer: /index.html} GET script.js {Referer: /index.html} GET index.html push: script.js, style.css, index.html
- 96. * flow control * prioritization * stream dependencies Even more sexy stuff...
- 97. Flow control
- 98. client server
- 99. client server
- 100. client server
- 109. client server with HTTP/2 flow control! SETTINGS (initial window size) 65,535
- 112. client server with HTTP/2 flow control! 2^31 - 1 WINDOW UPDATE
- 113. client server with HTTP/2 flow control! 2^31 - 1 WINDOW UPDATE WINDOW UPDATE 131070
- 115. B 1
- 116. B 1 stream weight
- 119. A 3 B 1 C 2 * D 1
- 120. 1. Introductioo0000oo00on 2. HTTP/2 in a nutshell 3. Performance of browser networking 4. Questions The plan
- 126. HTTP/2 vs network performance patterns
- 127. * domain sharding * asset concatenation
- 128. * domain sharding * asset concatenation it's a single connection with HTTP/2
- 129. * resource inlining
- 130. * resource inlining server push is better!
- 134. * compression * reducing HTTP redirects * reducing DNS lookups * caching on the client
- 135. 1. Introductioo0000oo00on 2. HTTP/2 in a nutshell 3. Performance of browser networking 4. Questions The plan
- 137. caniuse.com
- 139. HTTP 2.0 the future of WWW @tkaczmarzyk blog.kaczmarzyk.net HTTP/2 thanks! ? Tomek Kosior Kaczmarzyk (not only)
- 140. FAQ
- 141. Where can I find more information about HTTP/2?
- 142. Where can I find more information about HTTP/2? * RFC 7540 (really!) * High Performance Browser Networking By Ilya Grigorik
- 143. The future is now? Really?
- 144. HTTP/1.1 will be around for at least another decade 1. Negotiating HTTP/2 with TLS handshake 2. Upgrading a plaintext connection to HTTP/2 3. Initiating a plaintext HTTP/2 connection
- 145. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) -----------------------------------------------------------
- 146. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) -----------------------------------------------------------
- 147. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) -----------------------------------------------------------
- 148. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) ----------------------------------------------------------- HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c (... HTTP/2 response )
- 149. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) ----------------------------------------------------------- HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c (... HTTP/2 response )
- 150. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) ----------------------------------------------------------- HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c (... HTTP/2 response ) ----------------------------------------------------------- HTTP/1.1 200 OK Content-length: 243 Content-type: text/html (... HTTP/1.1 response ...)
- 151. GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload ) ----------------------------------------------------------- HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c (... HTTP/2 response ) ----------------------------------------------------------- HTTP/1.1 200 OK Content-length: 243 Content-type: text/html (... HTTP/1.1 response ...)
- 152. Are there any downsides of one connection per origin?
- 153. server client
- 154. server client 1 3 2
- 155. server client 1 3 2
- 156. server client 1 3 2
- 158. server client 1 3 TCP buffer: 1 3 2
- 159. server client 1 3 TCP buffer: 1 3 2 2x ACK
- 160. server client 1 3 TCP buffer: 1 3 2 2x ACK retran sm it
- 161. server client 1 3 TCP buffer: 1 3 2 2x ACK retran sm it 2
- 163. In tests so far, the negative effects of head-of-line blocking (especially in the presence of packet loss) is outweighed by the benefits of compression and prioritization. -- Hypertext Transfer Protocol version 2
- 164. Server push vs SSE & web sockets
- 165. Why do we need header compression?
- 166. Why HPACK?
- 167. More questions? :)
- 168. HTTP 2.0 the future of WWW @tkaczmarzyk blog.kaczmarzyk.net HTTP/2 thanks! ? Tomek Kosior Kaczmarzyk (not only)
- 169. Acknowledgements https://www.flickr.com/photos/eldelinux/15041976222/ Ilya Grigorik (@igrigorik) High performance browser networking https://www.flickr.com/photos/cblue98/5115058146 Photo Credit