Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get ready for HTTP/2!

Get ready for HTTP/2!

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

Natalia Venditto

February 04, 2017

More Decks by Natalia Venditto

Other Decks in Technology


  1. ...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.
  2. A protocol is a set of rules that govern a

  3. 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
  4. 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
  5. 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)
  6. 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
  7. 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.
  8. 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?
  9. 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?
  10. 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?
  11. 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.
  12. 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
  13. TCP slow start Slow start increases the amount of data

    transmitted on each successful ACK received, until the network’s maximum carrying capacity
  14. The “Latency” issue Network latency is an expression that represents,

    how much time it takes to a packet, to travel from origin to destination.
  15. 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
  16. Latency is also highly affected by the size of the

    network. In the case of the Internet, distances can be really long.
  17. 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)
  18. 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.
  19. The binary messages must map to the clear-text messages of

    HTTP 1.x*, to support existing infrastructure *: verbs, resource, headers, etc
  20. Establishing an HTTP/2 connection Upgrade Based (plain-text) Upgrade: h2c HTTP2-Settings:

    ... 101(Switching Protocols) Connection: Upgrade Upgrade: h2c
  21. 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)
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. Anatomy of an http/2 connection Weigth8 bits) R Stream Dependency

    (31 bits) Headers Frame Payload Pad length(8 bits) Header Block Fragment Paddings
  28. Anatomy of an http/2 connection HTTP/2 Binary Framing Data Frame

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

  30. 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.
  31. 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.
  32. 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
  33. 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
  34. 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
  35. According to w3techs.com 11.2% of websites currently implement HTTP/2 Website

    adoption Source https://w3techs.com/technologies/details/ce-http2/all/all
  36. 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
  37. 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
  38. 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.
  39. 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
  40. 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
  41. 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
  42. Other techniques that we should keep Resources Storage Code Optimization

    Predictive Serving Minifying Source Files Prefetching CDN + Caching Compressing Source Image Optimization Optimizing HTML
  43. In the end, a lot of these techniques are not

    only obsolete but detrimental. Integration with existing implementations
  44. We should drop them in favor of server-push, multiplexing and

    caching. Integration with existing implementations
  45. 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!