Get ready for HTTP/2! - Speaker Deck

Slide 1

Slide 1 text

summit 2017 Natalia Venditto Lisbon, Portugal 04/02/2017 NC Summit 2017 Presentation

Slide 2

Slide 2 text

Natalia Venditto Senior Frontend Developer @anfibiacreativa Introduction

Slide 3

Slide 3 text

We have an ever-growing PROBLEM 1

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

The INTERNET before the snowball 2

Slide 6

Slide 6 text

The internet before the snowball Does anyone know what WYSIWYG stands for?

Slide 7

Slide 7 text

The internet in the early/mid 2000’s

Slide 8

Slide 8 text

But like everything else, the internet changed 3

Slide 9

Slide 9 text

Websites grew in content and functionality

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

...to aid our clients in the delivery of better content and prettier websites...

Slide 12

Slide 12 text

..we had to write a lot more code.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

And what does more content + more code + API’s, etc, mean?

Slide 15

Slide 15 text

Requests, requests and more requests

Slide 16

Slide 16 text

Source: http://bit.ly/2cCsGdH And what has been dealing with this?

Slide 17

Slide 17 text

HTTP/1.x The protocol most of the internet is built on top of

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Protocols, protocols. 4

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

The Internet Layers Application Transport Network Link Physical For HTTP, it’s TCP

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

HTTP Transactions 5

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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?

Slide 29

Slide 29 text

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?

Slide 30

Slide 30 text

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?

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

EVEN WITH KEEP-ALIVE, HTTP/1.1 over TCP CONTINUES TO INTRODUCE SERIOUS PERFORMANCE ISSUES

Slide 33

Slide 33 text

The TCP pains... 6

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

HOL waterfall effect

Slide 37

Slide 37 text

TCP slow start Slow start increases the amount of data transmitted on each successful ACK received, until the network’s maximum carrying capacity

Slide 38

Slide 38 text

Latency 7

Slide 39

Slide 39 text

The “Latency” issue Network latency is an expression that represents, how much time it takes to a packet, to travel from origin to destination.

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Latency is also highly affected by the size of the network. In the case of the Internet, distances can be really long.

Slide 42

Slide 42 text

Dissecting HTTP/2 8

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

The actual change is how data is framed and transported between ends

Slide 48

Slide 48 text

Establishing an HTTP/2 connection 9

Slide 49

Slide 49 text

In HTTP/2, all exchanges are done over a single TCP connection...

Slide 50

Slide 50 text

In HTTP/2, we no longer use text but binary

Slide 51

Slide 51 text

The binary messages must map to the clear-text messages of HTTP 1.x*, to support existing infrastructure *: verbs, resource, headers, etc

Slide 52

Slide 52 text

Establishing an HTTP/2 connection Upgrade Based (plain-text) Upgrade: h2c HTTP2-Settings: ... 101(Switching Protocols) Connection: Upgrade Upgrade: h2c

Slide 53

Slide 53 text

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)

Slide 54

Slide 54 text

Anatomy of an HTTP/2 connection 10

Slide 55

Slide 55 text

STREAMS MESSAGES FRAMES Anatomy of n http/2 connection Components:

Slide 56

Slide 56 text

STREAMS are made of FRAMES, carrying a MESSAGE Anatomy of an http/2 connection

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Anatomy of an http/2 connection Weigth8 bits) R Stream Dependency (31 bits) Headers Frame Payload Pad length(8 bits) Header Block Fragment Paddings

Slide 63

Slide 63 text

Anatomy of an http/2 connection HTTP/2 Binary Framing Data Frame Payload Pad length(8 bits) Data Paddings

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

FRAMES can be INTERWOVEN, regardless of the stream they belong to Anatomy of an http/2 connection

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

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.

Slide 68

Slide 68 text

Again, let’s go back to see an HTTP/1.x request headers

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Server Push 11

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Only resources that are cacheable, non-idempotent and don’t include a request body

Slide 73

Slide 73 text

Accepting a promise en.html/login# PUSH_PROMISE Login-app.js, login.component.html

Slide 74

Slide 74 text

Rejecting a promise en.html/login# PUSH_PROMISE RST_STREAM

Slide 75

Slide 75 text

HTTP/2 Adoption State of support 12

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Client support stats

Slide 78

Slide 78 text

According to w3techs.com 11.2% of websites currently implement HTTP/2 Website adoption Source https://w3techs.com/technologies/details/ce-http2/all/all

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Akamai’s live demo Demo Akamai's Demo

Slide 82

Slide 82 text

The problem are our best practices 13 6

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Grouping resources to minimize requests Spriting images

Slide 86

Slide 86 text

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 and <script> tags respectively. This technique has negative impact as well

Slide 87

Slide 87 text

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==

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Opening multiple connections

Slide 90

Slide 90 text

Other techniques that we should keep Resources Storage Code Optimization Predictive Serving Minifying Source Files Prefetching CDN + Caching Compressing Source Image Optimization Optimizing HTML

Slide 91

Slide 91 text

In the end, a lot of these techniques are not only obsolete but detrimental. Integration with existing implementations

Slide 92

Slide 92 text

We should drop them in favor of server-push, multiplexing and caching. Integration with existing implementations

Slide 93

Slide 93 text

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!

Slide 94

Slide 94 text

Questions & Answers [email protected] @anfibiacreativa