HTTP/2 -- the future of WWW

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

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


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



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!



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

+END_STREAM+END_HEADERS :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


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


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

: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 table1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS


Static table1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS


Static table1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS

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


Static table1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS



Static table1

2

9

...

...

usr-agent

method

scheme

Chrome

GET

HTTPS


Dynamic table

21

...cookie JSESSION...


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


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



(image)stream 1HEADERS

(index.html)

stream 1DATA

(index.html)

local cache

stream 1

GET index.ht

ml

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

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


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

1. Introductioo0000oo00on



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



4. Questions

The plan

caniuse.com

The future is now(!?)


HTTP/2

thanks!?



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

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

thanks!?



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