I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

Nine years have passed since the first HTTP/2 draft was published, and the number of Web applications using THE HTTP/2 protocol on the web is increasing. Are you using HTTP/2 for your Web applications? Compared to HTTP/1.1, HTTP/2 has many advantages, such as greatly improving the loading speed of web pages in the browser. Let’s learn and use HTTP/2

This article describes the basics of HTTP/2, and the process is as follows:

  • HTTP/2 basics
  • Node using HTTP / 2

HTTP / 2

HTTP2 is the predecessor of Google SPDY, a TCP-based application layer protocol developed by Google to reduce the load time of web pages. It mainly through multiplexing, header compression, priority to improve the loading speed. Here is how these functions are implemented

multiplexing

  • Multiplexing means: on a channelSimultaneous transmission of multiple channelsInformation.

    Provided in HTTP/1.1keep-aliveTo maintain TCP connections, but there is a problem that HTTP/1.1 file transfers are sequential, i.eYou must wait for the previous transfer to complete before transferring the next file. sokeep-aliveIt can only reduceTime when the TCP connection is established.

  • As you can see from the figure above, three files have concurrent requests, but browsers limit the number of HTTP/1.1 concurrent requests (different browsers limit the number of concurrent requests, e.g. Chrome limits the maximum number of connections to 6).

  • HTTP/2 uses binary data frames for transmission. The number of concurrent HTTP/2 connections is generally not limited in browsers, as the number of concurrent HTTP/2 connections becomes the server. The following figure shows the HTTP/2 file transfer process.

The head of compression

In addition to multiplexing, HTTP/2 uses request header compression to reduce header length. The algorithm used for head compression is HPack. The basic principle of head compression is:

  • The browser and the server jointly maintain a static table containing common header information and combinations of values. Definition of static tables
  • In addition to maintaining a static table, maintain a dynamic table for dynamically adding header attributes that are custom or not in the static table.
  • The compressed values in the table use the HTTP/2 standardStatic Huffman tableTo carry outHuffman coding
  • For static table headers, only one index value is needed to find the response header information because both parties have introduced the static table. For dynamic table data, Huffman encoding is used to reduce the volume.

Active Server Push

Another important feature of HTTP/2 isThe server can actively push dataTo the browser side.

Requests for resources in HTTP/1.1 must be initiated by the browser, and the server responds with information. The diagram below:

In HTTP/2, as long as the browser is connected to the server, the server can actively push data to the client.

HTTP / 2

Although HTTP/2 has many advantages and can improve load speed, HTTP/2 is not perfect. HTTP/2 also has disadvantages:

  • Does not solve the problem of queue header blocking: HTTP/2 is based onTransmission control protocol TCPTo ensure reliable packet transmission, TCP has a packet retransmission mechanism. When HTTP packets are lost, the entire TCP waits for packet retransmission. If a large number of packets need to be transmitted, a block occurs.
  • Multiplexing causes server stress to rise, server bandwidth to be limited, and requests to time out easily

The node open HTTP / 2

HTTP/2 services are easy to develop using Node. The HTTP2 library is available in Node, which makes it easy to create HTTP/2 services.

const http2 = require('http2');
const path = require('path');
const fs = require('fs');

const app = http2.createServer(
  {
    key: fs.readFileSync(path.resolve(__dirname, 'example.com.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'example.com.crt')),},(req, res) = > {
    res.end('hello http2'); }); app.listen('8080'.() = > {
  console.log('http2 server running at 8080');
});
Copy the code

accesshttps://localhost:8080You can see the HTTP/2 service is enabled!

conclusion

This article focuses on the basics of HTTP/2 and how Node creates HTTP/2 services.

The main advantages of HTTP/2 are:

  • multiplexing
  • Header compression reduces the size of the packet header
  • The server can actively push information to the client

, etc.

Disadvantages of HTTP/2:

  • There is no solution to queue head congestion
  • Not limiting concurrency can increase server stress