$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Natalia Venditto

Other Decks in Technology

Transcript

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

    View Slide

  2. Natalia Venditto
    Senior Frontend Developer
    @anfibiacreativa
    Introduction

    View Slide

  3. We have an ever-growing
    PROBLEM
    1

    View Slide

  4. View Slide

  5. The INTERNET before the
    snowball
    2

    View Slide

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

    View Slide

  7. The internet in the early/mid 2000’s

    View Slide

  8. But like everything else,
    the internet changed
    3

    View Slide

  9. Websites grew in content and
    functionality

    View Slide

  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.

    View Slide

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

    View Slide

  12. ..we had to write a lot more code.

    View Slide

  13. View Slide

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

    View Slide

  15. Requests, requests
    and more requests

    View Slide

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

    View Slide

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

    View Slide

  18. View Slide

  19. Protocols, protocols.
    4

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  24. HTTP Transactions
    5

    View Slide

  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)

    View Slide

  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

    View Slide

  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.

    View Slide

  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?

    View Slide

  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?

    View Slide

  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?

    View Slide

  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.

    View Slide

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

    View Slide

  33. The TCP pains...
    6

    View Slide

  34. View Slide

  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

    View Slide

  36. HOL waterfall effect

    View Slide

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

    View Slide

  38. Latency
    7

    View Slide

  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.

    View Slide

  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

    View Slide

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

    View Slide

  42. Dissecting HTTP/2
    8

    View Slide

  43. View Slide

  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

    View Slide

  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)

    View Slide

  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.

    View Slide

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

    View Slide

  48. Establishing an HTTP/2
    connection
    9

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  54. Anatomy of an HTTP/2
    connection
    10

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  70. Server Push
    11

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  74. Rejecting a promise
    en.html/login#
    PUSH_PROMISE
    RST_STREAM

    View Slide

  75. HTTP/2 Adoption
    State of support
    12

    View Slide

  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

    View Slide

  77. Client support stats

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  81. Akamai’s live demo
    Demo
    Akamai's Demo

    View Slide

  82. The problem are our best
    practices
    13
    6

    View Slide

  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.

    View Slide

  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

    View Slide

  85. Grouping resources to minimize requests
    Spriting images

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  89. Opening multiple connections

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

  94. Questions & Answers
    [email protected]
    @anfibiacreativa

    View Slide