HTTP/2 -- the future of WWW

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

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?


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


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



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!



HTTP/2


HEADERS

HTTP/2


HEADERS

HTTP/2

+END_STREAM+END_HEADERS


HEADERS

HTTP/2


flags(binary header)


HEADERS

HTTP/2



host = example.org accept = image/jpeg


HEADERS

HTTP/2



:method = GET :scheme = https :path = /resource 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


pseudo headers

GET /resource HTTP/1.1Host: example.orgAccept: image/jpeg…foo: barcookie: a=b; e=f


HEADERS

CONTINUATION

-END_STREAM-END_HEADERS



…foo = barcookie = a=bcookie = e=f

HTTP/2


HTTP/2

HEADERS

CONTINUATION





mind the flags!


HTTP/2

HEADERS

CONTINUATION





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


HTTP/2

HEADERS

DATA

-END_STREAM+END_HEADERS

+END_STREAM

:method = POST :scheme = https :path = /resource host = example.org accept = app./json


HPACK

: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


Static table

1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS


Static table

1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS

29:host = example.org:path = /resource1cookie = JSESSION...


Static table

1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS



Static table

1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS


Dynamic table

21

...

cookie JSESSION...


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


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



(image)

stream 1HEADERS

(index.html)

stream 1DATA

(index.html)

local cache

stream

1

GET in

dex.htm

l

Server

Client



(image)

local cache

Server

Client



(image)

local cache

GET

stylesheet

Server

Client



(image)

local cache

GET

stylesheet

Jetty – “smart push”

GET index.htmlGET style.cssGET script.js


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


65,535 DATA

client

server


41,003 DATA

client

server


2^31 - 1WINDOWUPDATE

client

server


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



4. Questions

The plan

The web is dead and I have killed it.

– what's web?– web is dead, baby,

web is dead...


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



4. Questions

The plan

caniuse.com

The future is now(!?)



HTTP/2

thanks!

?


(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 …)-----------------------------------------------------------




HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c

(... HTTP/2 response …)



(... HTTP/2 response …)



(... HTTP/2 response …)-----------------------------------------------------------

HTTP/1.1 200 OK Content-length: 243 Content-type: text/html

(... HTTP/1.1 response ...)



(... 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

thanks!

?


(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

https://www.flickr.com/photos/eldelinux/15041976222/

Technology

HTTP/2 -- the future of WWW