Introduction

I have always wanted to study deeply.HTTP2However, the content is too much and complicated, which requires a lot of time. Therefore, we chose to adopt a fragmentary learning method and record the knowledge points we saw as a learning process.

The article comes from the Internet, here isOriginal textFor future reference.

Features of HTTP2

• binary transfers
• Head compression
• Multiplexing
• Server Push

Website addition process

1. First, the browser requests the main pageindex.html, the corresponding content of the server;
2. After receiving the response from the homepage, the browser starts parsing the homepage’shtmlTags, Discovery BuildDOMTrees also needCSS、PNG、JS

Other resources;

1. Initiate targetingCSS、PNG、JSThe content of the request;
2. Get and parseJSAndCSSSuch as content, and then continue to request dependent resources.

Server Push

The server receives the main request of the client and “predicts” the dependent resources of the main request. At the same time of corresponding main request, the server actively and concurrently pushes the dependent resources to the client. After the client analyzes the main request response, it can obtain the dependent resources from the local cache “without delay”, reduce the access delay, improve the access experience, and increase the concurrent capability of the link.

Push implementation

1、Identify dependent resources

Recommended Identification Method of Dependent Resources: Within File<link>Labels andHTTPHeaders carry, indicating that the resource will be used later, can be pre-requested, keywordspreloadDecorate this resource.

• Static Link labeling method:

Link: <push.css>; rel=preload; as=style

• HTTP header notation:

<link rel="preload" href="push.css" as="style">

among themrelIndicates resources</push.css>Is preloaded,asIndicates the file type of the resource. In addition,linkIt can also be usednopushModifications indicate that the browser may already have the resource cache, indicating that the server with push capability does not actively push resources, and indicating the server to push resources only when the browser first checks that there is no cache.nopushThe format is written as follows:

Link: </app/script.js>; rel=preload; as=script;nopush

2、Push resources

User accessCDN, mainly including directly accessed edge nodes, several intermediate nodes and customer source stations. Each layer in the path can analyze the request, predict the possible dependent resources, and insert static<link>Tag or add response header to return to browser.CDNPushing mainly uses the head to carry the pushing information.

• Client specifies push resources

Client throughurlOr the request header indicates the required resourcesurl, written as follows:

Url：http://http2push.gtimg.com/simple_push.html?req-push=simple_push.js

Or:

GET /simple_push.html HTTP/1.1
Host: http2push.gtimg.com
User-Agent: curl/7.49.1
Accept: */*
X-Push-Url: simple_push.js

• CDN node specifies push resources

CDN nodes configure push resources for the requested resources. The basic configuration is as follows:

location ~ “/simple_push.html$” {
http2_server_push_url /simple_push.js
}

• The source station specifies push resources

By adding a response headlinkNotify client orCDNNodes, subsequent dependent resources that want to be pushed, nodes with push function in the middle (e.g.CDNNodes) can request and push resources based on this information.