Get ready for HTTP/2!

This presentation is from 2017, however given the stats of adoption, continues to be relevant today.

1. summit 2017 Natalia Venditto Lisbon, Portugal 04/02/2017 NC Summit 2017 Presentation
2. Natalia Venditto Senior Frontend Developer @anfibiacreativa Introduction
3. We have an ever-growing PROBLEM 1
5. The INTERNET before the snowball 2
6. The internet before the snowball Does anyone know what WYSIWYG stands for?
7. The internet in the early/mid 2000’s
8. But like everything else, the internet changed 3
9. Websites grew in content and functionality
10. ...suddenly frontend developers stopped being those guys that played a bit with colors and pixels, implemented some neat transitions for buttons, here and there...we suddenly became quite important.
11. ...to aid our clients in the delivery of better content and prettier websites...
12. ..we had to write a lot more code.
14. And what does more content + more code + API’s, etc, mean?
15. Requests, requests and more requests
16. Source: http://bit.ly/2cCsGdH And what has been dealing with this?
17. HTTP/1.x The protocol most of the internet is built on top of
19. Protocols, protocols. 4
20. A protocol is a set of rules that govern a certain procedure. IN THE CASE OF HTTP, IT GOVERNS THE TRANSFER OF DATA, USUALLY between CLIENT and SERVER.
21. The Internet Layers Application Transport Network Link Physical For HTTP, it’s TCP
22. Other protocols interesting to us The IP or Network Layer It has a routing function, with the purpose of delivering packets, from the source host to the destination, based on IP addresses. IP: Internet Protocol
23. TCP or the Transport Layer When a browser opens dialogue with a server, the TCP protocol opens a connection, that allows HTTP data to be transferred reliably TCP: Transfer Connection Protocol TCP’s reliability derives mostly from it being full duplex, which means that communication is bidirectional, and for every packet sent, an acknowledgement is sent back, in the same order. Other protocols interesting to us
24. HTTP Transactions 5
25. HTTP Transaction Types ✱ SINGLE The client makes a single request, gets a single response. ✱ SERIAL Several requests are issued, each of them opening a new TCP connection. (rarely occurs anymore)
26. HTTP Transaction Types ✱ PARALLEL A different implementation of the keep-alive, multiple TCP connections are open in parallel, to send several requests. ✱ PERSISTENT Introduced with HTTP 1.1 in 2000, and also known as keep-alive, enables the use of a single TCP connection to send and receive multiple requests and responses
27. And how does an HTTP transaction work? Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client tries to resolve the domain name for the request by sending the DNS query, to which the DNS Server responds with the IP address.
28. Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client opens TCP connection with IP address of host. Three way handshake occurs. (SYNC, ACK-SYNC, ACK = circa 90 milliseconds.) And how does an HTTP transaction work?
29. Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load When three way handshake is successful, finally client sends HTTP request over to server. And how does an HTTP transaction work?
30. Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client waits for response. Server looks for resource and sends response with first byte of first packet (headers and content of response) And how does an HTTP transaction work?
31. And how does HTTP transaction work? Open Connection Close Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Further TCP segments are sent. Connection is closed with another three way handshake.
32. EVEN WITH KEEP-ALIVE, HTTP/1.1 over TCP CONTINUES TO INTRODUCE SERIOUS PERFORMANCE ISSUES
33. The TCP pains... 6
35. HOL or head-of-line-blocking Open Connection SYNC 1 ACK 1 SYNC 2 ACK 2 ??? SYNC 3 Head of line blocking (HOL) due to FIFO when implementing pipelining
36. HOL waterfall effect
37. TCP slow start Slow start increases the amount of data transmitted on each successful ACK received, until the network’s maximum carrying capacity
38. Latency 7
39. The “Latency” issue Network latency is an expression that represents, how much time it takes to a packet, to travel from origin to destination.
40. Contributors to Network Latency ✱ PROPAGATION The times it takes for packets to travel from origin to destination ✱ TRANSMISSION Delays caused by media, repetition, packet size, etc. ✱ ROUTER AND OTHER GATEWAY NODES Examination and processing of headers, for example
41. Latency is also highly affected by the size of the network. In the case of the Internet, distances can be really long.
42. Dissecting HTTP/2 8
44. HTTP Evolution Timeline 1991 1996 2000 2015 HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 RFC 7540 HPACK RFC 7541 2012 SPDY
45. HTTP/2 goals ✱ Decrease latency and increase speed ✱ Create negotiation mechanisms to elect the protocol to be used ✱ Maintain high level of compatibility with HTTP/1.1 ✱ Support common existing cases of HTTP (such as desktop browsers, mobile browsers, web API’s, web servers, proxies, firewalls and CDN’s)
46. The following stays the same: What is not changing between protocols? All high level syntax, such as methods, header fields, status codes, URI’s, they all remain.
47. The actual change is how data is framed and transported between ends
48. Establishing an HTTP/2 connection 9
49. In HTTP/2, all exchanges are done over a single TCP connection...
50. In HTTP/2, we no longer use text but binary
51. The binary messages must map to the clear-text messages of HTTP 1.x*, to support existing infrastructure *: verbs, resource, headers, etc
52. Establishing an HTTP/2 connection Upgrade Based (plain-text) Upgrade: h2c HTTP2-Settings: ... 101(Switching Protocols) Connection: Upgrade Upgrade: h2c
53. Establishing an HTTP/2 connection ALPN Based over HTTPS/TLS (in binary) TLS + ALPN TLS Handshake Extension PRI * HTTP/2.0\r\n\ r\nSM\r\n\r\n) 001001010… 001001010… (Conn. Preface)
54. Anatomy of an HTTP/2 connection 10
55. STREAMS MESSAGES FRAMES Anatomy of n http/2 connection Components:
56. STREAMS are made of FRAMES, carrying a MESSAGE Anatomy of an http/2 connection
57. Each stream... ✱ ...is a unique channel within a TCP connection, through which the request/response takes place Anatomy of an http/2 connection ✱ ...has a weight, that defines what resources are in charge of it ✱ ...may have a dependency to another stream, that indicate what resources are more important than others ✱ ...also have states
58. A message... ✱ ...is a complete sequence of header and data frames, that map to a request/response Anatomy of an http/2 connection Please notice that this mapping between binary and text, is what makes HTTP/2 work over HTTP/1.x (clear-text) although they’re not compatible, but have compatibility in semantics
59. The frames... ✱ ...are the smallest individual units of communication involved in the protocol Anatomy of an http/2 connection ✱ ...each of them contain a header section and a data section ✱ ...each of them have a type, a length, a flag and a stream id
60. Anatomy of an http/2 connection: frame HTTP/2 Binary Framing Length (24 bits) Type(8 bits) Flags(8 bits) R Stream Identifier (31 bits) Frame Payload (214 ...-224 -1 octets -depending on type-) Types include: HEADERS, DATA, PRIORITY, RST_STREAM, SETTINGS, PUSH_PROMISE, PING, GOAWAY, WINDOW_UPDATE, CONTINUATION
61. The most important fields in the headers frame are ✱ the type: it determines the use of the header Anatomy of an http/2 connection ✱ the flag: it’s associated to the type and determines some characteristic of the header ✱ the stream id: which determines to what stream a frame belongs to, and is transported through
62. Anatomy of an http/2 connection Weigth8 bits) R Stream Dependency (31 bits) Headers Frame Payload Pad length(8 bits) Header Block Fragment Paddings
63. Anatomy of an http/2 connection HTTP/2 Binary Framing Data Frame Payload Pad length(8 bits) Data Paddings
64. Anatomy of an http/2 connection HTTP/2 Binary Framing Settings Frame Payload Indentifier (16 bits) Value (32 bits) Parameters include: SETTINGS_HEADER_TABLE_SIZE, SETTINGS_ENABLE_PUSH, SETTINGS_MAX_CONCURRENT_STREAMS, SETTINGS_INITIAL_WINDOW_SIZE_SETTINGS_MAX_FRAME_SIZE, SETTINGS_MAX_HEADER_LIST_SIZE
65. FRAMES can be INTERWOVEN, regardless of the stream they belong to Anatomy of an http/2 connection
66. That is known as MULTIPLEXING Anatomy of an http/2 connection The mechanism that allows for several requests to be sent one after another, over the same TCP connection, at the same time that several responses are received, out of order, by combining signals into one.
67. No sequence streams interchange Stream 5 Stream 3 Stream 3 Stream 1 Directional flow control (adjusting window size) through use of WINDOW_UPDATE ensures that streams are never blocked.
68. Again, let’s go back to see an HTTP/1.x request headers
69. HTTP/2 solution for headers is HPACK ✱ It’s a compression format for efficiently representing header fields ✱ HPACK uses a static predefined and a dynamic table, to associating header fields to indexes
70. Server Push 11
71. Predictive serving of resources Along with multiplexing, this is one of the most exciting features of HTTP/2, which enables us to predictively push content to a client’s cache
72. Only resources that are cacheable, non-idempotent and don’t include a request body
73. Accepting a promise en.html/login# PUSH_PROMISE Login-app.js, login.component.html
74. Rejecting a promise en.html/login# PUSH_PROMISE RST_STREAM
75. HTTP/2 Adoption State of support 12
76. According to caniuse.com 78.1% of browsers currently support HTTP/2 ✱ 5.8% only partially and all of them over TLS (https) Client support Source https://w3techs.com/technologies/details/ce-http2/all/all
77. Client support stats
78. According to w3techs.com 11.2% of websites currently implement HTTP/2 Website adoption Source https://w3techs.com/technologies/details/ce-http2/all/all
79. Popular sites Sites that recently enabled h2 ✱ Ouku.com ✱ 9gag.com ✱ Spotify.com ✱ Mercadolibre.com.br ✱ Softonic.com ✱ Netcentric.biz Website adoption ✱ Google.com ✱ Youtube.com ✱ Facebook.com ✱ Wikipedia.com ✱ Yahoo.com ✱ Goole.co.in ✱ Twitter.com ✱ Google.co.jp ✱ Instagram.com ✱ VK.com
80. Hosting Java Apps Node Applications ✱ node-http2 ✱ node-spdy ✱ express JS 5.0 Server side support ✱ Apache HTTP 2.4.17+ ✱ Jetty 9.3+ ✱ Tomcat 9
81. Akamai’s live demo Demo Akamai's Demo
82. The problem are our best practices 13 6
83. Over the years, frontend developers have come up with workarounds to the HTTP/1.1 over TCP issues, in order to optimize performance, given that 80% of a response loading time correspond to frontend components.
84. Grouping resources to minimize requests jquery.js modernizr.js main.js more.js jquery.js modernizr.js main.js more.js main.js Concatenating CSS and JS
85. Grouping resources to minimize requests Spriting images
86. Inlining resources Grouping resources to minimize requests Inlining consists on embedding a necessary resource right in the HTML, right where you need it. If it’s an image, you can do it on BASE-64. CSS and JS can be embedded using the <style> and <script> tags respectively. This technique has negative impact as well
87. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCA YAAADd/14OAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJ qcGAAAAUFJREFUKJGV0C9MAnEUB/Dve3eMIptszuL43XE/1GgjOCduZp 3RrDSjVYPFzWR0jtnMMKPB2ZwUk8WheIdAcWM08QbvZzhRQAi+9rbP3p +vlclk4tOJRHEmmWy22u0AE4pNGJ4TaLNrzI1W6fxkyHwrIiGDbJApaO We5pCzRyEBgFZqGQYlMM8CgDFy3SPaDoKgPQQBwHVdx+rJFZiXAAAiT0 bsjWqjWgEA7kPf94N4Z2oFglJ0FC+SLWVPqfWhiYN3a8c5Aujgd63ZGw ehlErGiFv93gBNHkXenDcfA+77vQAPVq+bHYLacdbIljKIF75VMdH5WK 3U642fvLRK5wVyxoAdRYTj6pt/GA2NnrG8lHtCjP0oFQktsnafa6+Xg9 tIp9wLMHYAQIy8M7D1Uqvd/YmC2BRE5BMwj0KUHYf+VV8xa3TEn/anuA AAAABJRU5ErkJggg==
88. Domain sharding Opening multiple connections Domain sharding is an attempt at overriding the max-amount of connections at a time, by downloading resources from different domains or aliases. If a site downloads around 50 resources at the front-page, it could have it more or less covered, by establishing TCP connections to 9 different aliases at a time. Again, there is a downside to this too
89. Opening multiple connections
90. Other techniques that we should keep Resources Storage Code Optimization Predictive Serving Minifying Source Files Prefetching CDN + Caching Compressing Source Image Optimization Optimizing HTML
91. In the end, a lot of these techniques are not only obsolete but detrimental. Integration with existing implementations
92. We should drop them in favor of server-push, multiplexing and caching. Integration with existing implementations
93. Be aware of the flip side too! • Server push may be pushing resources that are already in the browser. • Compression rates for larger files are better than those for smaller file sizes!
94. Questions & Answers natalia.venditto@netcentric.biz @anfibiacreativa