Voxxed Days Thesaloniki 2016 - Whirlwind tour through the HTTP2 spec - Ole Michaelis

1. ! CodeStars
Whirlwind tour
through the HTTP2
spec
VOXXED Days Thessaloniki 2016 — 21.10.2016 — Ole Michaelis (Jimdo)

2. ! CodeStars
QUICK FAQ

3. ! CodeStars
IS IT REALLY
DONE?
YES!

4. ! CodeStars
IS SSL
MANDATORY?
No! But…

5. ! CodeStars
IS HTTP/2 MADE
BY GOOGLE?
No!

6. ! CodeStars
BUT WHAT’S
SPDY THEN?
Another Protocol!

7. ! CodeStars
IS HTTP/2
PLAIN TEXT?
No!

8. ! CodeStars
ARE HEADERS
COMPRESSED?
YES!

9. ! CodeStars
WILL HTTP/1.1
STILL WORK?
YES!

10. ! CodeStars
A BRIEF
HISTORY

11. ! CodeStars
1991
1989
Sir Tim Berners-Lee’s
World Wide Web
HTTP V0.9

12. ! CodeStars
1996
1992HTTP V1.0 draft
HTTP V1.0
RFC 1945
1998
1997
HTTP/1.1
RFC 2068
RFC 2326

13. ! CodeStars
2007
1999
HTTP/1.1
RFC 2616
IETF forms
HTTPbis WG
Nov.
2012
early
2012
Call for Proposals
for HTTP/2
First HTTP/2 draft based
on Google’s SPDY
✨

14. ! CodeStars
RFC 7230
Message Syntax & Routing
RFC 7231
Semantics and Content
RFC 7232
Conditional Requests
RFC 7233
Range Requests
RFC 7234
Caching
RFC 7235
Authentication
May
2015
2014
HTTP/1.1
split
HTTP/2
RFC 7540
End of 2015:
22% of all Internet Traffic is HTTP/2

15. ! CodeStars
HTTP BASICS

16. ! CodeStars
PLAIN TEXT

17. HTTP/1.1 302 Found
Cache-Control: private
Content-Type: text/html; charset=UTF-8
Location: http://www.google.de/?
GET / HTTP/1.1
Host: google.com
" ~ telnet google.com 80
Trying 173.194.39.2...
Connected to google.com.
Escape character is '^]'.

18. ! CodeStars
STATELESS

19. ! CodeStars
SUPER FLEXIBLE

20. ! CodeStars
HTTP/1.1
PROBLEMS

21. ! CodeStars
THE WEB
MATURED

22. ! CodeStars
http://httparchive.org/

23. ! CodeStars
38
CONNECTIONS
PER
PAGE

24. ! CodeStars
REQUEST
BONANZA

25. ! CodeStars

26. ! CodeStars
LATENCY!

27. ! CodeStars

28. ! CodeStars

29. ! CodeStars

30. ! CodeStars
😮💩

31. ! CodeStars
HOL* BLOCKING!
*Head of Line

32. ! CodeStars

33. ! CodeStars

34. ! CodeStars
HOL* BLOCKING
RECAP
ORDER MATTERS!

35. ! CodeStars
HOL* BLOCKING
RECAP
SLOWEST BLOCKS!

36. ! CodeStars
HOL* BLOCKING
RECAP
NO WORKAROUND!

37. ! CodeStars
HOL* BLOCKING
RECAP
OFTEN UNUSED!

38. ! CodeStars
WE
ENDEAVORED

39. ! CodeStars
SPRITING

40. ! CodeStars
CONCATENATING

41. ! CodeStars
DOMAIN
SHARDING

42. ! CodeStars
INLINING

43. ! CodeStars
PRELOADING
HACKS!

44. ! CodeStars
COOKIE FREE
DOMAINS*

45. ! CodeStars
SAVE ALL THE
REQUESTS!

46. ! CodeStars
HTTP/2 TO THE
RESCUE

47. ! CodeStars
COMPATIBLE

48. ! CodeStars
UPGRADE FROM
HTTP/1.1

49. ! CodeStars
Non Secure
HTTP

50. ! CodeStars
HTTPS

51. ! CodeStars
ALPN
RFC 7301
TLS-ALPN

52. ! CodeStars
Client Server
ClientHello --------> ServerHello
(ALPN extension & (ALPN extension &
list of protocols) selected protocol)
Certificate*
ServerKeyExchange*
CertificateRequest*
<-------- ServerHelloDone
Certificate*
ClientKeyExchange
CertificateVerify*
[ChangeCipherSpec]
Finished -------->
[ChangeCipherSpec]
<-------- Finished
Application Data <-------> Application Data

53. ! CodeStars
HEADSUP:
h2 vs. h2c

54. ! CodeStars
MULTIPLEXED

55. ! CodeStars
STREAM
STREAM
STREAM
CONNECTION
HTTP/2 CONNECTIONS
FRAME
FRAME
FRAME

56. ! CodeStars
FRAMES

57. ! CodeStars
BINARY

58. ! CodeStars
+-----------------------------------------------+
| Length (24) |
+---------------+---------------+---------------+
| Type (8) | Flags (8) |
+-+-------------+---------------+-------------------------------+
|R| Stream Identifier (31) |
+=+=============================================================+
| Frame Payload (0...) ...
+---------------------------------------------------------------+
FRAME LAYOUT

59. ! CodeStars

60. ! CodeStars
TYPES

61. ! CodeStars
+---------------+
|Pad Length? (8)|
+---------------+-----------------------------------------------+
| Data (*) ...
+---------------------------------------------------------------+
| Padding (*) ...
+---------------------------------------------------------------+
DATA 0x0

62. ! CodeStars
+-+-------------------------------------------------------------+
|E| Stream Dependency (31) |
+-+-------------+-----------------------------------------------+
| Weight (8) |
+-+-------------+
PRIORITY 0x2

63. ! CodeStars
+---------------------------------------------------------------+
| Error Code (32) |
+---------------------------------------------------------------+
RST_STREAM 0x3

64. ! CodeStars
+-------------------------------+
| Identifier (16) |
+-------------------------------+-------------------------------+
| Value (32) |
+---------------------------------------------------------------+
SETTINGS 0x4

65. ! CodeStars
a bunch more…

66. ! CodeStars
+-----------------------------------------------+
| 0000 0000 0000 0000 0100 0000 |
+---------------+---------------+---------------+
| 00000110 | 00000001 |
+-+-------------+---------------+-------------------------------+
|0| 010 0001 1100 0000 1111 1111 1110 1110 |
+=+=============================================================+
| 10010000 11010100 00001100 11110100 |
| 10100000 11011011 10100010 00110100 |
+---------------------------------------------------------------+
PING 0x6 /w ACK
length (64)
type: PING (0x6 )flags: ACK (0x1)
stream id
opaque data (64)

67. ! CodeStars
HTTP/2
FEATURES

68. ! CodeStars
SERVER PUSH!

69. ! CodeStars
+---------------+
|Pad Length? (8)|
+-+-------------+-----------------------------------------------+
|R| Promised Stream ID (31) |
+-+-----------------------------+-------------------------------+
| Header Block Fragment (*) ...
+---------------------------------------------------------------+
| Padding (*) ...
+---------------------------------------------------------------+
PUSH_PROMISE 0x5

70. ! CodeStars
FLOW CONTROL

71. ! CodeStars
WEIGHTED
DEPENDENCIES

72. ! CodeStars
0
3 5
97
128 64
16 16
PRIORITY TREE
dependency stream id
weight
from “Understanding HTTP/2 prioritization” by Moto Ishizawa
https://speakerdeck.com/summerwind/2-prioritization

73. ! CodeStars
FIREFOX DEPENDENCY TREE
0
3
201
5
101
7
1
9
1
33
32
35
32
37
32
25
32
11
1
15
32
21
32
17
32
19
32
23
32
13
32
27
22
29
22
31
22

74. ! CodeStars
COMPRESSED
HEADERS

75. ! CodeStars
+---------------+
|Pad Length? (8)|
+-+-------------+-----------------------------------------------+
|E| Stream Dependency? (31) |
+-+-------------+-----------------------------------------------+
| Weight? (8) |
+-+-------------+-----------------------------------------------+
| Header Block Fragment (*) ...
+---------------------------------------------------------------+
| Padding (*) ...
+---------------------------------------------------------------+
HEADERS 0x1

76. ! CodeStars
HPACK
RFC 7541

77. ! CodeStars
:method GET
:scheme https
:host jimdo.com
:path /resource
user-agent Mozilla/5.0
custom-hdr some-value
1 :authority
2 :method GET
… … …
51 referer
… … …
62 user-agent Mozilla/5.0
63 :host jimdo.com
… … …
2
7
63
19 huffman(‘/resource’)
62
huffman(‘custom-hdr’)
huffman(‘some-value’)
request headers
static table
dynamic table
encoded headers
HEADER COMPRESSION TABLE

78. ! CodeStars
IN 1 MINUTE
HUFFMAN

79. ! CodeStars
MISSISSIPPI RIVER = 17 chars * 8 bit = 136 bits
M
I
S
P
R
V
E
_
1
5
4
2
2
1
1
1 I5 S4 P2 R2 M1 V1 E1 _1
00 01 100 101 1100 1101 1110 1111
IS9 PR4 MV2 E_2
MVE_4
PRMVE_8
ISPRMVE_17
0 1 0 1 0 1 0 1
0 1
0
1
0
1
https://www.youtube.com/watch?v=ZdooBTdW5bM

80. ! CodeStars
COMPRESSION
TABLE
I5 S4 P2 R2 M1 V1 E1 _1
00 01 100 101 1100 1101 1110 1111

81. ! CodeStars
HTTP/2 IN THE
REAL WORLD

82. ! CodeStars
IT’S HERE
ALREADY

83. ! CodeStars
demo time
nghttp -vnu https://http2.golang.org/reqinfo
https://http2.golang.org/
https://http2.akamai.com/demo

84. ! CodeStars
IMPLEMENTATIONS

85. ! CodeStars
BROWSER

86. http://caniuse.com/#search=http2

87. http://caniuse.com/#search=http2
Why are you optimising
for this?!

88. ! CodeStars
SERVER

89. others
16%
GWS (Google)
2%
nginx
15%
IIS (Microsoft)
28%
Apache
39%
GWS
unknown — Chrome
dropped SPDY in Feb 2015
Apache
since 2.4.12 — Jul 2015
nginx
since 1.9.5 — 22 Sep 2015
IIS
Win 10 / Server 2016
MARKET SHARE & HTTP/2 SUPPORT
http://netcraft.com/

90. ! CodeStars
It is super easy!

91. ! CodeStars
Apache
# this needs to be somewhere
LoadModule http2_module modules/mod_http2.so
# this is already optional
<IfModule http2_module>
LogLevel http2:info
</IfModule>

92. ! CodeStars
NGINX
server {
listen 443 ssl http2 default_server;
ssl_certificate server.crt;
ssl_certificate_key server.key;
...
}

93. ! CodeStars
3rd Party

94. ! CodeStars
The Future

95. ! CodeStars
Cache digests
https://tools.ietf.org/html/draft-kazuho-h2-cache-digest-00

96. ! CodeStars
QUIC*
*TCP/2
https://tools.ietf.org/html/draft-tsvwg-quic-protocol-00

97. ! CodeStars
YOU ARE
HOLDING IT
WRONG

98. ! CodeStars
STOP

99. ! CodeStars
STOP
CONCATENATING

100. ! CodeStars
STOP
SPRITING

101. ! CodeStars
STOP
DOMAIN SHARDING

102. ! CodeStars
TRASH
THE ASSET PIPELINE

103. ! CodeStars
START USING
HTTP/2

104. ! CodeStars
OLE
MICHAELIS
! CodeStars
" nesQuick
# codestars.eu

105. ! CodeStars
THANKYOU
! CodeStars

107. RESSOURCES! @bagder @igrigorik @tatsuhiro_t @mnot
https://http2.github.io/http2-spec/
http://daniel.haxx.se/http2/
http://daniel.haxx.se/blog/2015/05/07/http2-for-tcpip-geeks/
http://www.slideshare.net/peychevi/http2-and-quick-protocols-optimizing-the-web-stack
https://ma.ttias.be/architecting-websites-http2-era/
https://benramsey.com/talks/2015/05/phptek-http2/
https://speakerdeck.com/summerwind/2-prioritization
http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_HEADER_COMPRESSION
http://tools.ietf.org/html/rfc6585
http://httparchive.org
https://http2.golang.org/
https://github.com/igrigorik/http-2
https://aprescott.com/posts/spdy-colon-headers
https://tools.ietf.org/html/draft-ietf-httpbis-header-compression-12
https://www.youtube.com/watch?v=ZdooBTdW5bM
https://github.com/supertinou/huffman
http://daniel.haxx.se/blog/2015/03/06/tls-in-http2/
http://news.netcraft.com/archives/2015/06/25/june-2015-web-server-survey.html
http://isthewebhttp2yet.com/

108. ! CodeStars
Thanks to all the
people who helped
me with this deck!