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
- First, the browser requests the main page
index.html
, the corresponding content of the server; - After receiving the response from the homepage, the browser starts parsing the homepage’s
html
Tags, Discovery BuildDOM
Trees also needCSS
、PNG
、JS
Other resources;
- Initiate targeting
CSS
、PNG
、JS
The content of the request; - Get and parse
JS
AndCSS
Such 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, keywordspreload
Decorate 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 themrel
Indicates resources</push.css>
Is preloaded,as
Indicates the file type of the resource. In addition,link
It can also be usednopush
Modifications 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.nopush
The 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 throughurl
Or 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 headlink
Notify 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.