1文读懂 HTTP 2.0 之服务器消息推送

点一下上方“程序编写思索录”,挑选“置顶群众号”

有内函有使用价值的文章内容第1時间投递!

作者:阮1峰

原文:http://www.ruanyifeng.com/blog/2018/03/http2_server_push.html

HTTP/2 协议书的关键目地是提升网页页面特性。

头信息内容(header)原先是立即传送文字,如今是缩小后传送。原先是同1个 TCP 联接里边,上1个答复(response)推送完了,服务器才可以推送下1个,如今能够好几个答复1起推送。

服务器消息推送(server push)是 HTTP/2 协议书里边,唯11个必须开发设计者自身配备的作用。别的作用全是服务器和访问器全自动完成,不必须开发设计者关注。

本文详尽详细介绍服务器消息推送的基本原理和配备方式。

1、传统式的网页页面恳求方法

下面是1个十分简易的 HTML 网页页面文档index.html。

<!DOCTYPE html><html><head><linkrel="stylesheet"href="style.css"></head><body><h1>hello world</h1><imgsrc="example.png"></body></html>

这个网页页面包括1张款式表style.css和1个照片文档example.png。以便3D渲染这个网页页面,访问器会传出3个恳求。第1个恳求是index.html。

GET/index.html HTTP/1.1

服务器收到这个恳求,就把index.html推送给访问器。访问器发现里边包括了款式表和照片,因而再传出两个恳求。

GET/style.css HTTP/1.1

GET/example.png HTTP/1.1

这便是传统式的网页页面恳求方法。它有两个难题,1是最少必须两轮 HTTP 通讯,2是收到款式文档以前,网页页面都会显示信息1片空白,这个环节1旦超出2秒,客户体验就会十分不太好。

2、传统式方法的改善

1种处理方法便是把外界資源合拼在网页页面文档里边,降低 HTTP 恳求。例如,把款式表的內容写在<style>标识当中,把照片改为 Base64 编号的 Data URL。

另外一种方式便是資源的预载入(preload)。网页页面预先告知访问器,马上免费下载一些資源。例如,上例能够写成下面这样。

<link rel="preload" href="/styles.css"as="style"><link rel="preload" href="/example.png"as="image">

针对上例来讲,preload指令并沒有甚么协助。可是,假如前1个网页页面就应用这个指令,预载入后1个网页页面必须的資源,那末客户开启后1个网页页面时,就会觉得速率飞快。

这两种方式都有缺陷。第1种方式尽管降低了 HTTP 恳求,可是把不一样种类的编码合拼在1个文档里,违背了分工标准。第2种方式只是提早了免费下载時间,并沒有降低 HTTP 恳求。

3、服务器消息推送的定义

服务器消息推送(server push)指的是,都还没收到访问器的恳求,服务器就把各种各样資源消息推送给访问器。

例如,访问器只恳求了index.html,可是服务器把index.html、style.css、example.png所有推送给访问器。这样的话,只必须1轮 HTTP 通讯,访问器就获得了所有資源,提升了特性。

4、Nginx 完成

Nginx 从 1.13.9 版刚开始,适用服务器消息推送。最先,进到工作中文件目录,把原先的主页删掉。

$cd nginx-docker-demo$ rm html/index.html

随后,新建html/index.html文档,写入本文第1节的网页页面源代码。

此外,html子文件目录下面,还要新建两个文档example.png和style.css。前者能够随意找1张 PNG 照片,后者要在里边写1些款式。

h1 {color: red;}

最终,开启配备文档conf/conf.d/default.conf,将 443 端口号的一部分改为下面的模样。

server {listen443 ssl http2;server_name localhost;sslon;ssl_certificate /etc/nginx/certs/example.crt;ssl_certificate_key /etc/nginx/certs/example.key;ssl_session_timeout5m;ssl_ciphers HIGH:!aNULL:!MD5;ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_cipherson;location / {root /usr/share/nginx/html;index index.html index.htm;http2_push /style.css;http2_push /example.png; }}

实际上便是最终多了两行http2_push指令。它的意思是,假如客户恳求根相对路径/,就消息推送style.css和example.png。

如今能够起动器皿了。

$ docker container run \ --rm \ --name mynginx \ --volume "$PWD/html":/usr/share/nginx/html \ --volume "$PWD/conf":/etc/nginx \ -p 127.0.0.2:8080:80 \ -p 127.0.0.2:8081:443 \ -d \ nginx

开启访问器,浏览 https://127.0.0.2:8081 。访问器会提醒资格证书躁动不安全,不去管它,再次浏览,就可以看到网页页面了。

网页页面上看不出来服务器消息推送,务必开启"开发设计者专用工具",切换到 Network 面板,便可以看到实际上只传出了1次恳求,style.css和example.png全是消息推送过来的。

查询结束,关掉器皿。

$ docker container stop mynginx

5、Apache 完成完成

Apache 也相近,能够在配备文档httpd.conf或.htaccess里边开启服务器消息推送。

<FilesMatch "\index.html$">Header add Link "</styles.css>; rel=preload; as=style"Header add Link "</example.png>; rel=preload; as=image"</FilesMatch>

6、后端开发完成

上面的服务器消息推送,必须写在服务器的配备文档里边。这明显很不便捷,每次改动都要重新启动服务,并且运用与服务器的配备不可该混在1起。

服务器消息推送也有另外一个完成方式,便是后端开发运用造成 HTTP 答复的头信息内容Link指令。服务器发现有这个头信息内容,就会开展服务器消息推送。

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

假如要消息推送好几个資源,就写成下面这样。

Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image

能够参照 Go、Node、PHP 的完成案例。

这时候,Nginx 的配备改为下面这样。

server {listen443 ssl http2;# ...root /var/www/html;location = / {proxy_pass http://upstream;http2_push_preloadon; }}

假如服务器或访问器不适用 HTTP/2,那末访问器就会依照 preload 来解决这个头信息内容,预载入特定的資源文档。

客观事实上,这个头信息内容便是 preload 规范提出的,它的英语的语法和as特性的值都写在了规范里边。

7、缓存文件难题

服务器消息推送有1个很不便的难题。所要消息推送的資源文档,假如访问器早已有缓存文件,消息推送便是消耗带宽。即便消息推送的文档版本号升级,访问器也会优先选择应用当地缓存文件。

1种处理方法是,只对第1次浏览的客户打开服务器消息推送。下面是 Nginx 官方得出的示例,依据 Cookie 分辨是不是为第1次浏览。

server { listen 443 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";}

8、特性提高

服务器消息推送能够提升特性。在网上测评的結果是,开启这项作用,比不开启时的 HTTP/2 快了8%,比将資源都嵌入网页页面的 HTTP/1 快了5%。

能够看到,提高水平也并不是非常多,大约是几百毫秒。并且,也不提议1次消息推送太多資源,这样反而会连累特性,由于访问器迫不得已解决全部消息推送过来的資源。只消息推送 CSS 款式表将会是1个较为好的挑选。

9、参照连接

https://www.smashingmagazine.com/2017/04/guide-http2-server-pushhttps://www.nginx.com/blog/nginx⑴⑴3⑼-http2-server-push

都看到这里了,不关心1下么

程序编写思索录

1码不扫,何扫天地



扫描二维码分享到微信