Home > Developer > Web Develop
The main purpose of the HTTP/2 protocol is to improve Web page performance.
Header information was originally transmitted directly to the text, and is now compressed after transmission. The original is the same TCP connection, the last response (response) sent out, the server can send the next, can now be sent together with multiple responses.
Server Push is the only feature in the HTTP/2 protocol that requires the developer to configure itself. Other features are automatically implemented by the server and the browser, without the need for developer care.
This article details the principle of server push and how to configure it.
One, the traditional Web page request methodThe following is a very simple HTML Web page file index.html .
<! DOCTYPE html>>><linkRel="Stylesheet"Href="Style.css">><body>
>hello world> < Span class= "token punctuation" >src= "Example.png" ></ Body> >
This page contains a style sheet style.css and a picture file example.png . To render this page, the browser makes three requests. The first request is a index.html .
/index.html HTTP/1.1
The server receives this request and sends it to the index.html browser. The browser found a style sheet and a picture in it, and then issued two requests.
/style.css HTTP/1.1
/example.png HTTP/1.1
This is the traditional way of Web page request. It has two problems, one is at least two rounds of HTTP communication, and the second is to receive the style file, the page will show a blank, this stage once more than 2 seconds, the user experience will be very bad.
Ii. improvement of the traditional wayOne solution is to combine external resources in a Web page file to reduce HTTP requests. For example, write the contents of the stylesheet <style> into a label and change the image to the BASE64 encoded Data URL.
Another approach is the preloading of resources (preload). The Web page pre-tells the browser to download some resources immediately. For example, the example above can be written as follows.
<linkRel="Preload"Href="/styles.css"As= "Style "> <link rel= "Preload" href= "/example.png" as = "Image ">
For the above example, the preload command does not help. However, if the previous page uses this command, pre-loading the next page requires resources, then users open the next page, you will feel fast.
Both of these methods have drawbacks. Although the first approach reduces HTTP requests, merging different types of code into a single file violates the principle of division of labor. The second method is just ahead of the download time and does not reduce the HTTP request.
Third, the concept of server pushServer push refers to the server pushing various resources to the browser without receiving a request from the browser.
For example, the browser only requests index.html , but the index.html server style.css sends, and example.png all to the browser. In this case, only one round of HTTP communication is needed, the browser gets all the resources and improves the performance.
Nginx starts from version 1.13.9 and supports server push. The previous tutorial has been done with the Nginx container, and then to experience it.
First, go to the working directory and delete the original homepage.
$ cd nginx-docker-demo$ rm html/index.html
Then, create html/index.html a new file and write the source code for the first section of this article.
Also, html under subdirectories, create a new two files example.png and style.css . The former can look for a PNG image, the latter to write some style inside.
h1 { color: red;}
Finally, open the configuration file conf/conf.d/default.conf and change the section of port 443 to look like the following.
Server{Listen443 SSL HTTP2; server_name localhost; SSL on; Ssl_certificate/etc/nginx/certs/example. crt; Ssl_certificate_key/etc/nginx/certs/example. Key; Ssl_session_timeout 5m; Ssl_ciphers High:!anull:! MD5; Ssl_protocols SSLv3 TLSv1 TLSv1.1 Tlsv1.2 Ssl_prefer_ Server_ciphers on/{root /usr/share /nginx/html; index Index.html index.htm /style . Css/example .png; }} /span>
In fact, there are two more lines of command at the end http2_push . It means that if a user requests a root path / , it pushes style.css and example.png .
Now it's time to start the container.
$ docker Container Run--rm--name Mynginx--volume"$PWD/html ":/usr/share/nginx/html --volume Span class= "token string" > " $PWD/conf" :/etc/nginx -p 127.0. 0.2:8080:80 -p 127.0 0.2:8081:443 -d nginx
Open the browser and access https://127.0.0.2:8081. The browser will prompt the certificate is unsafe, do not care about it, continue to visit, you can see the page.
The Web page does not see the server push, you must open the "Developer Tools", switch to the Network panel, you can see in fact only sent a request, style.css and example.png are all pushed over.
After viewing, close the container.
V. Implementation of Apache$ docker container stop mynginx
Apache is also similar, you can open the server in the configuration file httpd.conf or .htaccess push.
Six, back-end implementation<FilesMatch "\index.html$"> Header add Link "</styles.css>; rel=preload; as=style" Header add Link "</example.png>; rel=preload; as=image"</FilesMatch>
The above server pushes and needs to be written in the server's configuration file. This is obviously inconvenient, and each modification will restart the service, and the configuration of the application and the server should not be mixed together.
Another implementation of server push-back is the header information command that the backend application generates HTTP responses to Link . When the server discovers this header information, it will push the server.
Link: </styles.css>; rel=preload; as=style
If you want to push multiple resources, write it as follows.
Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image
You can refer to the implementation examples of Go, Node, and PHP.
At this point, Nginx configuration changed to the following.
{ listen 443 ssl http2; # ... root /var/www/html; location = / { proxy_pass http://upstream; http2_push_preload on; }}
If the server or browser does not support HTTP/2, then the browser will follow preload to process the header information and preload the specified resource file.
In fact, this header is the preload standard, and its syntax and as attribute values are written in the standard.
Server push has a very troublesome problem. The resource file to be pushed, if the browser already has the cache, the push is a waste of bandwidth. Even if the pushed file version is updated, the browser will take precedence over the local cache.
One workaround is to turn on the server push only for the first access user. The following is an example of the official Nginx, based on the Cookie to determine whether the first access.
Eight, performance improvementServer{Listen443 SSL HTTP2 Default_server; Ssl_certificate SSL/certificate. PEM; Ssl_certificate_key SSL/key. PEM; Root/var/www/html; Http2_push_preload on; Location = /demo. html {add_header Set-cookie "Session=1"; Add_header Link $ Resources; }}map $http _cookie $resources { "~*session=1 " ""; Default "</style.css>; As=style; Rel=preload ";}
Server push can improve performance. The result of the online assessment is that the ability to turn on this feature is 8% faster than the HTTP/2 when it is not opened, 5% faster than the HTTP/1 that embed the resources in the page.
As you can see, the level of ascension is not very much, probably hundreds of milliseconds. Also, it is not recommended to push too many resources at once, which can slow down performance because the browser has to deal with all the resources that are pushed over. Only pushing CSS stylesheets can be a good choice.
Nine, reference linksFinish
Http://www.ruanyifeng.com/blog/2018/03/http2_server_push.html
HTTP/2 Server Push Tutorial (the main purpose of the HTTP/2 protocol is to improve Web page performance, configure Nginx and Apache)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
