preface

Author: @Xiaoyao Yao Loves Candy Candy

As a front-end developer 🐶, HTTP is an essential part of our knowledge map, as well as a must-ask in an interview. HTTP2 promises to make our applications faster, simpler, and more stable. It solves many of the problems of version 1.1 perfectly. Here’s a look at some of the improvements.

The history of HTTP

Before we get into HTTP2, let’s take a look at the history of HTTP.

  • HTTP/0.9 – Single-line protocol HTTP was introduced in 1990. Back then, HTTP was very simple: only GET methods were supported; No head; You can only get plain text.
  • In 1996, HTTP was officially published as a standard, version HTTP/1.0. Version 1.0 added header, status code, permission, cache, long connection (default short connection) and other specifications, can be said to build the basic framework of the protocol.
  • HTTP/1.1 – Further improvements in 1997, version 1.1 followed. The major improvement in version 1.1 is the default long connection; Force the client to provide a Host header; Pipelines; Cache-control, ETag, and other Cache extensions.

Current problems

Instead of talking about HTTP2, let’s take a look at some of the problems with HTTP 1.1:

  1. Header blocking: Only one request can be sent over a TCP connection, and subsequent requests are queued until the previous one is completed.
  2. Although HTTP/1.1 pipelining can support concurrent requests for multiple TCP connections, it is difficult for browsers to implement it. Chrome, Firefox, etc., have disabled pipelining. So version 1.1 relies on multiple TCP connections for concurrent requests, which can be costly to establish and slow to start.
  3. HTTP/1.X is a text format with an uncompressed header, and each request carries identical headers such as cookies and user-agent.
  4. The client needs to initiate the request

The age of HTTP/2.0 has come

Here’s a demo to get a feel for HTTP/2.0. This demo loads 379 images to compare HTTP/1.1 and HTTP/2.0 performance. HTTP/1.1 vs. 2.0 performance comparison

In theory, HTTP/2.0 will more than double the performance of HTTP/1.1, and the performance improvement will be even more pronounced in weak network environments. The following two pictures show the performance comparison between fast 3G and slow 3G when I set up the network.

Binary frame layer

At the heart of HTTP2’s performance improvement lies the binary framing layer. HTTP2 is a binary protocol that transmits data in binary format rather than 1.x text format.

Learn more about frame types

Here we have three concepts.

  • Stream: a bidirectional byte Stream over an established TCP connection that can carry one or more messages.
  • Message: A complete HTTP request or response, consisting of one or more frames. Frames for a particular message are sent on the same stream, which means that an HTTP request or response can only be sent on one stream.
  • Frame: The basic unit of communication. There can be any number of streams on a TCP connection.

multiplexing

The above mentioned HTTP/1.1 header blocking and multiple TCP connection problems are solved perfectly by HTTP2 multiplexing. HTTP2 allows all communication to be done over a SINGLE TCP connection, enabling true concurrency of requests. Let’s see how HTTP2 is implemented:

Here we can see the optimization effect of multiplexing intuitively. Since HTTP2 enables concurrent requests, subsequent requests do not have to wait, and the load time is of course much lower. Take a snapshot of the HTTP2 image load time details (to look at later requests) :

The head of compression

Header compression is also a highlight of HTTP2. In 1.x, the header is transferred in text format, which typically adds 500-800 bytes of overhead per transfer. Now it is normal to open a webpage with hundreds of requests, and some header fields of each request are the same, such as cookie and user-agent. HTTP2 uses the HPACK compression format to compress the header. Header compression needs to be between the browser and the server:

  • Maintain an identical static dictionary of common header names and combinations of common header names and values
  • Maintain the same dynamic dictionary that can be added dynamically
  • The header field of the transmission is encoded by static Huffman encoding

The HTTP2 static dictionary looks like this (only a partial extract, the full table is here) :

After the first transfer of user-Agent, the browser and the server add it to their dynamic dictionary. The index can then be transferred in a single byte.

The WireShark can be used to capture and decrypt HTTP2 packets using HTTPS.

  • The user-Agent is transmitted for the first time and the user-Agent for the second time

  • The first compression strength of HPACK

Server-side push

Server-side push enables the server to predict the resources needed by the client and push them to the client actively. For example, if the client requests index.html, the server can push script.js and style.css. The implementation principle is that when the client sends a page request, the server can analyze the other resources that the page depends on and actively push them to the client’s cache. When the client receives the request of the original web page, the resources it needs are already in the cache.

For each resource it wishes to send, the server sends a PUSH_PROMISE frame, and the client can reject a push by sending a RST_STREAM frame (when the resource is already in the cache). This step takes place before the parent response (index.html), and the client knows what resources the server is trying to push, so it doesn’t create duplicate requests for those resources. When the client receives the index.html response, script.js and style.css are already in the cache.

Node is recommended if you want to build an HTTP2 server, it’s easy. link

Refer to the article

  • Introduction to the HTTP / 2
  • Principles behind HTTP/2
  • HTTP/2 header compression technology introduction
  • Use Wireshark to debug HTTP/2 traffic
  • What are the major improvements in HTTP/2.0 over 1.0?
  • A brief analysis of HTTP/2 new features

conclusion

The main improvements to HTTP2 compared to 1.1, and the power of H2. There are also some features, such as stream prioritization, that are not covered in this article. If there are mistakes, please correct!