Slides from my talk at PHPers #3 Wrocław.

1. Good developers know how things work.
Great developers know why things work.

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

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

4. About me
Just wandering around
the world, developing software :)
I co-organize
FB/konferencjaboilingfrogs

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

6. c = 299 792 458 m/s
Achievement unlocked!
Tribute

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

10. =======================================
=======================================
0100110101011001011
client server
[ 0%]

11. =======================================
=======================================
client server

14. SYN

15. SYN-ACK

16. ACK

18. =======================================
=======================================
client server

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

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

22. Have you ever?
Achievement unlocked!
Tribute

23. Server
Client
HTTP/0.9

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

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

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

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

28. Server
Client
HTTP/1.0

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

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

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

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

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

34. Server
Client
HTTP/1.1request1
request2
request3

35. Server
Client
HTTP/1.1request1
request2
request3
!!! head of line
blocking

36. Server
Client
multiple connections
per browser session

37. Server
Client

38. Server
Client

39. WTF!?
WTF!?
Server
Client

43. SPDY

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

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

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

49. Server
Client
single
connection!

50. Server
Client
single
connection!

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

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

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

54. Server
Client
single
connection!

55. Server
Client
single
connection!
GO AWAY

56. Server
Client
single
connection!
GO AWAY

57. Server
Client
new
connection!

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

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

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

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

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

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

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

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

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

67. GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg
…
foo: bar
cookie: 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 = bar
cookie = a=b
cookie = e=f
HTTP/2

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

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

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

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

72. HPACK

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

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

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

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

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

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
2
9
:host = example.org
:path = /resource
1
cookie = JSESSION...
Dynamic table
21
...
cookie JSESSION...

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
2
9
:host = example.org
:path = /resource
1
21
Dynamic table
21
...
cookie JSESSION...

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

81. server push

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

84. Server
Client

85. Server
Client
stream
1
GET
index.html

86. Server
Client
stream
1
GET
index.html

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

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

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

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

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

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

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

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

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

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

97. Flow control

98. client
server

99. client
server

100. client
server

101. client
server
1010011010110101110101101

102. client
server
1010011010110101110101101
Achievement unlocked!
Awwww...

103. client
server
1010011010110101110101101

104. client
server
1010011010110101110101101
101001101

105. client
server
1010011010110101110101101
101001101
011011111

106. client
server
1010011010110101110101101
101001101
011011111
00001101

107. client
server
1010011010110101110101101
101001101
011011111
00001101
011011111

108. client
server
1010011010110101110101101
101001101
011011111
00001101
011011111
011011110100110111
110011101111101001
001110111001000011

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

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

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

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

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

114. Prioritization
& stream dependencies

115. B
1

116. B
1
stream
weight

117. A
3
B
1
stream
weight

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

119. A
3
B
1
C
2
*
D
1

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

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

125. – what's web?
– web is dead, baby,
web is dead...
Achievement unlocked!
Tribute

126. HTTP/2 vs
network performance patterns

127. * domain sharding
* asset concatenation

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

129. * resource inlining

130. * resource inlining
server push is better!

131. Content Delivery Networks

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

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

137. caniuse.com

138. The future is now(!?)

139. HTTP 2.0
the future of WWW
@tkaczmarzyk
blog.kaczmarzyk.net
HTTP/2
thanks!
?
Tomek “Kosior” Kaczmarzyk
(not only)

140. FAQ

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

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

143. The future is now? Really?

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

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

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

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

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

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

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

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

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

153. server
client

154. server
client
1
3
2

155. server
client
1
3
2

156. server
client
1
3
2

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

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

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

160. server
client
1
3
TCP buffer: 1 3
2
2x ACK
retran
sm
it

161. server
client
1
3
TCP buffer: 1 3
2
2x ACK
retran
sm
it
2

162. server
client
TCP buffer:
1
3
2
2x ACK
retran
sm
it
1 32
ACK

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

164. Server push
vs
SSE & web sockets

165. Why do we need
header compression?

166. Why HPACK?

167. More
questions? :)

168. HTTP 2.0
the future of WWW
@tkaczmarzyk
blog.kaczmarzyk.net
HTTP/2
thanks!
?
Tomek “Kosior” Kaczmarzyk
(not only)

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