Presentation for my code::dive 2015 talk "HTTP/2 -- the future of WWW"

1. this slide was
intentionally left blank

2. Good developers know how things work.
Great developers know why things work.
ancient proverb

3. HTTP 2.0
the future of WWW
@tkaczmarzyk
blog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk

4. HTTP 2.0
the future of WWW
@tkaczmarzyk
blog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk
HTTP/2

5. 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!!!)

6. The plan
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser
networking
4. Questions

7. c = 299 792 458 m/s

9. Achievement unlocked!
Ba-dum-tss Level 2

11. =======================================
=======================================
0100110101011001
client server
[ 0%]

12. =======================================
=======================================
client server

15. SYN

16. SYN-ACK

17. ACK

19. =======================================
=======================================
client server

21. 1 bandwidth
[Mbps]
2 3 4 5 6 7 8 9
2500
2000
1000
1500
3000
page
load time
[ms]

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

23. 180 latency
[ms]
140 100 60 20
2500
2000
1000
1500
3000
page
load time
[ms]

24. page load time
vs decreasing latency
180 latency
[ms]
140 100 60 20
2500
2000
1000
1500
3000
page
load time
[ms]

25. Have you ever?
Achievement unlocked!
Tribute

26. Server
Client
HTTP/0.9

27. Server
Client
HTTP/0.9
starting a TCP/IP
connection

28. GET /resource HTTP/0.9
Host: example.org
Accept: image/jpeg
Server
Client
HTTP/0.9

29. HTTP/0.9 304 Not Modified
ETag: "xyzzy"
Expires: Thu, 23 Jan ...
Server
Client
HTTP/0.9

30. Server
Client
HTTP/0.9
closing the TCP/IP
connection

31. Server
Client
HTTP/1.0

32. GET /resource HTTP/1.0
Host: example.org
Accept: image/jpeg
Server
Client
HTTP/1.0

33. HTTP/1.0 304 Not Modified
ETag: "xyzzy"
Expires: Thu, 23 Jan ...
Server
Client
HTTP/1.0

34. GET /resource2 HTTP/1.0
Host: example.org
Accept: image/jpeg
Server
Client
HTTP/1.0

35. HTTP/1.0 200 OK
ETag: "xyzzy"
...
Server
Client
HTTP/1.0

36. Server
Client
HTTP/1.0
request1
response1
request2
request3
response2
response3

37. Server
Client
HTTP/1.1
request1
request2
req.3

38. Server
Client
HTTP/1.1
request1
request2
!!!head of line
blocking
req.3

39. Server
Client
multiple connections
per browser session

40. Server
Client

41. Server
Client

42. WTF!?
WTF!?
Server
Client

46. SPDY

47. RFC 7540 – HTTP/2
RFC 7541 – HPACK

48. The plan
1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser
networking
4. Questions

49. Achievement unlocked!
Ba-dum-tss Level 3

52. Server
Client
single
connection!

53. Server
Client
single
connection!

54. Server
Client
single
connection!
stream 1
HEADERS
stream 1
DATA
stream 1
HEADERS

55. Server
Client
single
connection!
stream 1
HEADERS
stream 3
DATA
stream 1
DATA
stream 3
HEADERS stream 1
HEADERS
stream 3
HEADERS

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

57. Server
Client
single
connection!

58. Server
Client
single
connection!
GO AWAY

59. Server
Client

60. Server
Client
single
connection!
GO AWAY

61. Server
Client
new
connection!

62. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg

63. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
HTTP/2

64. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
HEADERS
HTTP/2

65. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
HEADERS
HTTP/2
+END_STREAM
+END_HEADERS

66. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
HEADERS
HTTP/2
+END_STREAM
+END_HEADERS
flags
(binary header)

67. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
HEADERS
HTTP/2
+END_STREAM
+END_HEADERS
host = example.org
accept = image/jpeg
flags
(binary header)

68. 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)

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

70. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
…
foo: bar
cookie: a=b; e=f

71. 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
…
cookie = a=b
cookie = e=f

72. 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
…
cookie = a=b
cookie = e=f
mind the
flags!

73. 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
…
cookie = a=b
cookie = e=f
mind the
flags!
decomposed for
cacheability

74. POST /resource HTTP/1.1
Host: example.org
Accept: application/json
…
foo: bar
cookie: a=b; e=f
{
“name”: ”Homer”
}

75. 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”
}

76. HPACK

77. :method = GET
:scheme = HTTPS
:host = example.org
:path = /resource
user-agent = Chrome...
cookie = JSESSIONID...

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

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

80. :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...

81. :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...

82. :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...

83. :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...

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

85. server push

86. <html>
<head>
...
<link rel=”stylesheet”
type=”text/css” href=”...” />
</head>
<body>
...
<img src=”...”/>
...
</body>
</html>

88. Server
Client

89. Server
Client
stream 1
GET index.html

90. Server
Client
stream 1
GET index.html

91. Server
Client
stream 2
PUSH_PROMISE
(stylesheet)
stream 4
PUSH_PROMISE
(image)
local cache
stream 1
GET index.html

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

93. Server
Client
stream 2
PUSH_PROMISE
(stylesheet)
stream 4
PUSH_PROMISE
(image)
local cache

94. Server
Client
stream 2
PUSH_PROMISE
(stylesheet)
stream 4
PUSH_PROMISE
(image)
local cache
GET
stylesheet

95. Server
Client
stream 2
PUSH_PROMISE
(stylesheet)
stream 4
PUSH_PROMISE
(image)
local cache
GET
stylesheet

96. Jetty – “smart push”
GET index.html
GET style.css
GET script.js

97. Jetty – “smart push”
GET index.html
GET style.css {Referer: /index.html}
GET script.js {Referer: /index.html}

98. Jetty – “smart push”
GET index.html
GET style.css {Referer: /index.html}
GET script.js {Referer: /index.html}

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

100. * flow control
* prioritization
* stream dependencies
Even more sexy stuff...

101. Flow control

102. client
server

103. client
server

104. client
server

105. client
server
101001101011010111010

106. client
server
101001101011010111010
Achievement unlocked!
Awwww...

107. client
server
101001101011010111010

108. client
server
101001101011010111010
101001101

109. client
server
101001101011010111010
101001101
011011111

110. client
server
101001101011010111010
101001101
011011111
00001101

111. client
server
101001101011010111010
101001101
011011111
00001101
011011111

112. client
server
101001101011010111010
101001101
011011111
00001101
011011111
011011110100110111
110011101111101001
001110111001000011

113. client
server
with HTTP/2
flow control!
SETTINGS
(initial
window size)
65,535

114. client
server
with HTTP/2
flow control!
65,535
DATA

115. client
server
with HTTP/2
flow control!
41,003
DATA

116. client
server
with HTTP/2
flow control!
2^31 - 1
WINDOW
UPDATE

117. client
server
with HTTP/2
flow control!
2^31 - 1
WINDOW
UPDATE
WINDOW
UPDATE131070

118. Prioritization
& stream dependencies

119. B
1

120. B
1
stream
weight

121. A
3
B
1
stream
weight

122. A
3
B
1
stream
weight
* implicit
root stream

123. A
3
B
1
C
2
*
D
1

124. 1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser
networking
4. Questions
The plan

126. The web is dead and I have killed it.

129. – what's web?
– web is dead
Achievement unlocked!
Tribute

130. HTTP/2 vs
network performance patterns

131. * domain sharding
* asset concatenation

132. * domain sharding
* asset concatenation
it's a single connection with HTTP/2

133. * resource inlining

134. * resource inlining
server push is better!

135. Content Delivery Networks

138. * compression
* reducing HTTP redirects
* reducing DNS lookups
* caching on the client

139. 1. Introductioo0000oo00on
2. HTTP/2 in a nutshell
3. Performance of browser
networking
4. Questions
The plan

141. caniuse.com

142. The future is now(!?)

143. HTTP 2.0
the future of WWW
HTTP/2
thanks!
?
@tkaczmarzyk
blog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk

144. FAQ

145. Where can I find more
information about HTTP/2?

146. Where can I find more
information about HTTP/2?
* RFC 7540 (really!)
* “High Performance Browser
Networking” By Ilya Grigorik

147. The future is now? Really?

148. “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

149. GET /resource HTTP/1.1
Host: boilingfrogs.pl
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: (... SETTINGS payload …)
-----------------------------------------------------------

150. GET /resource HTTP/1.1
Host: boilingfrogs.pl
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: (... SETTINGS payload …)
-----------------------------------------------------------

151. GET /resource HTTP/1.1
Host: boilingfrogs.pl
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: (... SETTINGS payload …)
-----------------------------------------------------------

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

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

154. 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 ...)

155. 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 ...)

156. Are there any downsides
of one connection per origin?

157. server
client

158. server
client
1
3
2

159. server
client
1
3
2

160. server
client
1
3
2

161. server
client
1
3
2
TCP buffer: 1 3

162. server
client
1
3
TCP buffer: 1 3
2

163. server
client
1
3
TCP buffer: 1 3
2
2x ACK

164. server
client
1
3
TCP buffer: 1 3
2
2x ACK
retransm
it

165. server
client
1
3
TCP buffer: 1 3
2
2x ACK
retransm
it
2

166. server
client
TCP buffer:
1
3
2
2x ACK
retransm
it
1 32
ACK

167. “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

168. Server push
vs
SSE & web sockets

169. Why do we need
header compression?

170. Why HPACK?

171. More
questions? :)

172. HTTP 2.0
the future of WWW
HTTP/2
thanks!
?
@tkaczmarzyk
blog.kaczmarzyk.net
Tomek “Kosior” Kaczmarzyk

173. Acknowledgements
https://www.flickr.com/photos/eldelinux/15041976222/
Ilya Grigorik (@igrigorik)
“High performance browser networking”
https://www.flickr.com/photos/cblue98/5115058146
Photo Credit