http/2 -- the future of www
Post on 11-Feb-2017
348 Views
Preview:
TRANSCRIPT
this slide wasintentionally left blank
Good developers know how things work.
Great developers know why things work.
ancient proverb
HTTP 2.0the future of WWW
@tkaczmarzykblog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk
HTTP 2.0the future of WWW
@tkaczmarzykblog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk
HTTP/2
About me- I work as CTO at Cohesiva
- I have a blog: blog.kaczmarzyk.net
- I co-organize , software craftsmanship conference
(16.01.2016 in Wroclaw!!!)
The plan1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser networking
4. Questions
c = 299 792 458 m/s
Achievement unlocked!Ba-dum-tss Level 2
=======================================
=======================================0100110101011001011000110010110001100101
client server
[ 0%]
=======================================
=======================================
client server
SYN
SYN-ACK
ACK
=======================================
=======================================
client server
1 bandwidth
[Mbps]2 3 4 5 6 7 8 9
2500
2000
1000
1500
3000
pageload time
[ms]
1 bandwidth
[Mbps]2 3 4 5 6 7 8 9
2500
2000
1000
1500
3000
pageload time
[ms]
page load timevs increasing bandwidth
180 latency
[ms]140 100 60 20
2500
2000
1000
1500
3000
pageload time
[ms]
page load timevs decreasing latency
180 latency[ms]
140 100 60 20
2500
2000
1000
1500
3000
pageload time
[ms]
Have you ever?
Achievement unlocked!Tribute
Server
Client
HTTP/0.9
Server
Client
HTTP/0.9
starting a TCP/IP connection
GET /resource HTTP/0.9Host: example.orgAccept: image/jpeg
Server
Client
HTTP/0.9
HTTP/0.9 304 Not ModifiedETag: "xyzzy"Expires: Thu, 23 Jan ...
Server
Client
HTTP/0.9
Server
Client
HTTP/0.9
closing the TCP/IP connection
Server
Client
HTTP/1.0
GET /resource HTTP/1.0Host: example.orgAccept: image/jpeg
Server
Client
HTTP/1.0
HTTP/1.0 304 Not ModifiedETag: "xyzzy"Expires: Thu, 23 Jan ...
Server
Client
HTTP/1.0
GET /resource2 HTTP/1.0Host: example.orgAccept: image/jpeg
Server
Client
HTTP/1.0
HTTP/1.0 200 OKETag: "xyzzy"...
Server
Client
HTTP/1.0
Server
Client
HTTP/1.0re
ques
t1 response1
requ
est2
requ
est3
response2
response3
Server
Client
HTTP/1.1re
ques
t1re
ques
t2re
q. 3
Server
Client
HTTP/1.1re
ques
t1re
ques
t2
!!!head of line blocking
req. 3
Server
Client
multiple connectionsper browser session
Server
Client
Server
Client
WTF!?
WTF!?Server
Client
SPDY
RFC 7540 – HTTP/2RFC 7541 – HPACK
The plan1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser networking
4. Questions
Achievement unlocked!Ba-dum-tss Level 3
Server
Client
single
connec
tion!
Server
Client
single
connec
tion!
Server
Client
single
connec
tion!
stream 1HEADERS
stream 1DATA
stream 1HEADERS
Server
Client
single
connec
tion!
stream 1HEADERS
stream 3DATA
stream 1DATA
stream 3HEADERS stream 1
HEADERSstream 3HEADERS
Server
Client
single
connec
tion!
stream 1HEADERS
stream 3DATA
stream 1DATA
stream 3HEADERS
stream 5HEADERSstream 5
DATA
stream 5DATA
stream 7HEADERS
stream 1HEADERSstream 3HEADERS
Server
Client
single
connec
tion!
Server
Client
single
connec
tion!
GO AWAY
Server
Client
Server
Client
single
connec
tion!
GO AWAY
Server
Client
new
connec
tion!
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HTTP/2
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
+END_STREAM+END_HEADERS
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
+END_STREAM+END_HEADERS
flags(binary header)
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
+END_STREAM+END_HEADERS
host = example.org accept = image/jpeg
flags(binary header)
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
+END_STREAM+END_HEADERS :method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg
flags(binary header)
GET /resource HTTP/1.1Host: example.orgAccept: 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
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg…foo: barcookie: a=b; e=f
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg…foo: barcookie: 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
…cookie = a=bcookie = e=f
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg…foo: barcookie: 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
…cookie = a=bcookie = e=f
mind the flags!
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg…foo: barcookie: 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
…cookie = a=bcookie = e=f
mind the flags!
decomposed for cacheability
POST /resource HTTP/1.1Host: example.orgAccept: application/json…foo: barcookie: a=b; e=f
{ “name”: ”Homer”}
POST /resource HTTP/1.1Host: example.orgAccept: application/json…foo: barcookie: 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”}
HPACK
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
29:host = example.org:path = /resource1cookie = JSESSION...
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
29:host = example.org:path = /resource1cookie = JSESSION...
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
29:host = example.org:path = /resource1cookie = JSESSION...
Dynamic table
21
...cookie JSESSION...
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
29:host = example.org:path = /resource121
Dynamic table
21
...cookie JSESSION...
Static table
Dynamic table
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
1
2
9
...
...
21
...
29:host = example.org:path = /resource121
usr-agent
method
scheme
Chrome
GET
HTTPS
cookie JSESSION...
+Huffman
server push
<html><head> ... <link rel=”stylesheet” type=”text/css” href=”...” /></head><body>
... <img src=”...”/> ...</body></html>
Server
Client
Server
Client
stream 1
GET index.ht
ml
Server
Client
stream 1
GET index.ht
ml
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
local cache
stream 1
GET index.ht
ml
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)stream 1HEADERS
(index.html)
stream 1DATA
(index.html)
local cache
stream 1
GET index.ht
ml
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
local cache
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
local cache
GET
stylesheet
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
local cache
GET
stylesheet
Jetty – “smart push”GET index.htmlGET style.cssGET script.js
Jetty – “smart push”GET index.htmlGET style.css {Referer: /index.html}GET script.js {Referer: /index.html}
Jetty – “smart push”GET index.htmlGET style.css {Referer: /index.html}GET script.js {Referer: /index.html}
Jetty – “smart push”GET index.htmlGET style.css {Referer: /index.html}GET script.js {Referer: /index.html}
GET index.html push: script.js, style.css, index.html
* flow control
* prioritization
* stream dependencies
Even more sexy stuff...
Flow control
client
server
client
server
client
server
client
server
101001101011010111010
client
server
101001101011010111010
Achievement unlocked!Awwww...
client
server
101001101011010111010
client
server
101001101011010111010
101001101
client
server
101001101011010111010
101001101011011111
client
server
101001101011010111010
10100110101101111100001101
client
server
101001101011010111010
10100110101101111100001101011011111
client
server
101001101011010111010
10100110101101111100001101011011111
011011110100110111110011101111101001001110111001000011
client
server
with HTTP/2flow control!
SETTINGS(initial
window size)65,535
client
server
with HTTP/2flow control!
65,535 DATA
client
server
with HTTP/2flow control!
41,003 DATA
client
server
with HTTP/2flow control!
2^31 - 1WINDOWUPDATE
client
server
with HTTP/2flow control!
2^31 - 1
WINDOWUPDATE
WINDOWUPDATE131070
Prioritization & stream dependencies
B1
B1
stream
weight
A3
B1
stream
weight
A3
B1
stream
weight
* implicit root stream
A3
B1
C2
*
D1
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser networking
4. Questions
The plan
The web is dead and I have killed it.
– what's web?– web is dead
Achievement unlocked!Tribute
HTTP/2 vsnetwork performance patterns
* domain sharding* asset concatenation
* domain sharding* asset concatenation
it's a single connection with HTTP/2
* resource inlining
* resource inlining
server push is better!
Content Delivery Networks
* compression* reducing HTTP redirects* reducing DNS lookups* caching on the client
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser networking
4. Questions
The plan
caniuse.com
The future is now(!?)
HTTP 2.0the future of WWW
HTTP/2
thanks!?
@tkaczmarzykblog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk
FAQ
Where can I find more information about HTTP/2?
Where can I find more information about HTTP/2?
* RFC 7540 (really!)* “High Performance Browser Networking” By Ilya Grigorik
The future is now? Really?
“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
GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload …)-----------------------------------------------------------
GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload …)-----------------------------------------------------------
GET /resource HTTP/1.1 Host: boilingfrogs.pl Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: (... SETTINGS payload …)-----------------------------------------------------------
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 …)
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 …)
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 ...)
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 ...)
Are there any downsidesof one connection per origin?
server
client
server
client
1
3
2
server
client
1
3
2
server
client
1
3
2
server
client
1
3
2
TCP buffer: 1 3
server
client
1
3
TCP buffer: 1 3
2
server
client
1
3
TCP buffer: 1 3
22x ACK
server
client
1
3
TCP buffer: 1 3
22x ACK
retra
nsmit
server
client
1
3
TCP buffer: 1 3
22x ACK
retra
nsmit
2
server
client
TCP buffer:
1
3
22x ACK
retra
nsmit
1 32
ACK
“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
Server pushvs
SSE & web sockets
Why do we needheader compression?
Why HPACK?
Morequestions? :)
HTTP 2.0the future of WWW
HTTP/2
thanks!?
@tkaczmarzykblog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk
Acknowledgements
https://www.flickr.com/photos/eldelinux/15041976222/
Ilya Grigorik (@igrigorik)
“High performance browser networking”
https://www.flickr.com/photos/cblue98/5115058146
Photo Credit
top related