Good developers know how things work. Great developers know why things work.
Good developers know how things work.
Great developers know why things work.
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
Just wandering around the world, developing software :)
I co-organize
FB/konferencjaboilingfrogs
The plan
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell 3. Performance of browser networking
4. Questions
c = 299 792 458 m/s
Achievement unlocked!Tribute
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]
page load timevs increasing bandwidth
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
t2
requ
est3
Server
Client
HTTP/1.1re
ques
t1re
ques
t2
requ
est3
!!! head of line blocking
Server
Client
multiple connectionsper browser session
Server
Client
Server
Client
WTF!?
WTF!?
Server
Client
SPDY
RFC 7540 – HTTP/2RFC 7541 – HPACK
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell 3. Performance of browser networking
4. Questions
The plan
Achievement unlocked!Ba-dum-tss Level 3
Server
Client
single
conn
ectio
n!
Server
Client
single
conn
ectio
n!
Server
Client
single
conn
ectio
n!
stream 1HEADERS
stream 1DATA
stream 1HEADERS
Server
Client
single
conn
ectio
n!
stream 1HEADERS
stream 3DATA
stream 1DATA
stream 3HEADERS stream 1
HEADERS
stream 3HEADERS
Server
Client
single
conn
ectio
n!
stream 1HEADERS
stream 3DATA
stream 1DATA
stream 3HEADERS
stream 5HEADERS
stream 5DATA
stream 5DATA
stream 7HEADERS
stream 1HEADERS
stream 3HEADERS
Server
Client
single
conn
ectio
n!
Server
Client
single
conn
ectio
n!
GO AWAY
Server
Client
single
conn
ectio
n!
GO AWAY
Server
Client
new
conn
ectio
n!
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
flags(binary header)
host = example.org accept = image/jpeg
GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg
HEADERS
HTTP/2
+END_STREAM+END_HEADERS
flags(binary header)
:method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg
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
HEADERS
CONTINUATION
-END_STREAM-END_HEADERS
+END_STREAM+END_HEADERS
:method = GET :scheme = https :path = /resource host = example.org accept = image/jpeg
…foo = barcookie = a=bcookie = e=f
HTTP/2
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
…foo = barcookie = 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
…foo = barcookie = 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 table
1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table
1
2
9
...
...
usr-agent
method
scheme
Chrome
GET
HTTPS
:method = GET:scheme = HTTPS:host = example.org:path = /resourceuser-agent = Chrome...cookie = JSESSIONID...
Static table
1
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 table
1
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 table
1
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 table
1
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 in
dex.htm
l
Server
Client
stream
1
GET in
dex.htm
l
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
local cache
stream
1
GET in
dex.htm
l
Server
Client
stream 2PUSH_PROMISE(stylesheet)
stream 4PUSH_PROMISE
(image)
stream 1HEADERS
(index.html)
stream 1DATA
(index.html)
local cache
stream
1
GET in
dex.htm
l
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
1010011010110101110101101
client
server
1010011010110101110101101
Achievement unlocked!Awwww...
client
server
1010011010110101110101101
client
server
1010011010110101110101101
101001101
client
server
1010011010110101110101101
101001101011011111
client
server
1010011010110101110101101
10100110101101111100001101
client
server
1010011010110101110101101
10100110101101111100001101011011111
client
server
1010011010110101110101101
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, baby,
web is dead...
Achievement unlocked!Tribute
HTTP/2 vsnetwork performance patterns
* domain sharding* asset concatenation
* domain sharding* asset concatenation
it's a single connecti
on 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
@tkaczmarzykblog.kaczmarzyk.net
HTTP/2
thanks!
?
Tomek “Kosior” Kaczmarzyk
(not only)
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
retran
smit
server
client
1
3
TCP buffer: 1 3
22x ACK
retran
smit
2
server
client
TCP buffer:
1
3
22x ACK
retran
smit
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
@tkaczmarzykblog.kaczmarzyk.net
HTTP/2
thanks!
?
Tomek “Kosior” Kaczmarzyk
(not only)
Acknowledgements
https://www.flickr.com/photos/eldelinux/15041976222/
Ilya Grigorik (@igrigorik)
“High performance browser networking”
https://www.flickr.com/photos/cblue98/5115058146
Photo Credit