一文了解 HTTP 2.0 之网络服务器消息推送

摘要:点一下上边“程序编写思索录”,挑选“置顶微信公众号”...

点一下上边“程序编写思索录”,挑选“置顶微信公众号”

有品位有使用价值的文章内容第一時间送到!

创作者:阮一峰

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

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

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

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

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

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

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

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

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

GET/index.html HTTP/1.1

网络服务器接到这一恳求,就把index.html推送给访问器。访问器发觉里边包括了款式表和照片,因此再传出2个恳求。

GET/style.css HTTP/1.1

GET/example.png HTTP/1.1

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

二、传统式方法的改善

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

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

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

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

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

三、网络服务器消息推送的定义

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

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

四、Nginx 完成

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

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

随后,在建html/index.html文档,载入文中第一节的网页页面源代码。

此外,html根目录下边,也要在建2个文档example.png和style.css。前面一种能够随意找一张 PNG 照片,后面一种要在里边写一些款式。

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 控制面板,便可以见到实际上只传出了一次恳求,style.css和example.png全是消息推送回来的。

查询结束,关掉器皿。

$ docker container stop mynginx

五、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>

六、后端开发完成

上边的网络服务器消息推送,必须写在网络服务器的配备文档里边。这显而易见很不便捷,每一次改动必须重新启动服务,并且运用与网络服务器的配备不可该混在一起。

网络服务器消息推送也有另外一个完成方式,便是后端开发运用造成 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特性的值都写在了规范里边。

七、缓存文件难题

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

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

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";}

八、特性提高

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

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

九、参照连接

https://www.smashingmagazine.com/2017/04/guide-http2-server-pushhttps://www.nginx.com/blog/nginx-1-13-9-http2-server-push

要看到这儿了,不关心一下么

程序编写思索录

一码不扫,何扫天地



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:凡科建站