让互联网更快,Server Push 特性及开启方式详解
过去 Nginx 并不支持 HTTP/2 的 Server Push 特性,幸运的是 Nginx 1.13.9 已支持该特性,详情介绍请移步 Nginx 官方博客。
Server Push 这个特性是让服务端将部分资源主动推送给客户端(浏览器),节约了客户端需要使用这些资源再次发送请求所消耗的时间。
又拍云在 Nginx 基础上,其全网 CDN 已支持 HTTP/2 的 Server Push 特性,成为国内首家推出 Server Push 功能的 CDN 厂商。这也是自又拍云 CDN 全网支持 TLS 1.3 以来,又一重要特性的更新。将来,我们会一如既往、不遗余力地保持新特性的更新迭代,为全网用户带来更加快速的访问体验。
本文将围绕以下 3 个方面来介绍 Server Push 特性:
- 什么是 Server Push ?
- 如何使用 Server Push ?
- 如何验证 Server Push 是否生效?
什么是 Server Push
Server Push 是 HTTP/2 规范中引入的一种新技术,即服务端在没有被客户端明确的询问下,抢先地 “推送” 一些网站资源给客户端(浏览器),该特性可以极大的改善页面访问效果。
为了更方便的理解,下文将进行对比分析:
![](https://upload-images.jianshu.io/upload_images/80097-4e1bf45f7c4095bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)
WEB 浏览器访问 WEB 服务端遵循着请求--响应模式。也即 WEB 浏览器请求一个资源,WEB 服务器响应一个资源。以常规的网页为例,当请求一个 /index.html 后,WEB 服务端响应一个 /index.html 页面给 WEB 浏览器,此时 WEB 浏览器会去解析该 /index.html 页面,发现还需要去加载 JS、CSS、图片等资源,此时客户端会依次去请求这些资源。这无形当中影响了首屏渲染的时间,不利于页面快速加载和渲染。
![](https://upload-images.jianshu.io/upload_images/80097-f98fdf8511b3cdb0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/568)
使用 Server Push 技术之后,当 WEB 浏览器请求 /index.html 之后,WEB 服务端会直接将需要推送的资源一并发给 WEB 浏览器,而不需要 WEB 浏览器依次进行请求,这减少了 WEB 浏览器进行请求所消耗的时间。
如何使用 Server Push
又拍云 CDN 支持 Server Push 特性可以通过如下两种方式来实现:
1.利用 HTTP Link 首部
该方式在 W3C Preload 工作草案中有详细描述。示例为:
Link: </static/css/style.css>; rel=preload; as=style;
其中,Link 首部中 as 是必选的,它告诉了浏览器推送的资源类型,例如 as=style 表明了推送的资源是一个样式表,除了样式表,您还可以推送其他的内容类型,详情参见支持的内容类型。
如果需要进行多资源推送,可以进行如下设置:
Link: </static/css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image
2. CDN 控制台自定义 Server Push 配置
登陆 CDN 控制台,依次进入:服务管理 > 功能配置 > HTTPS > HTTP/2 ,点击【管理】按钮即可开始配置,例如:
匹配路径为:
/index.html
推送资源为:
/static/123.css /static/456.js
在 CDN 控制台的配置如截图所示:
![](https://upload-images.jianshu.io/upload_images/80097-5a38c6c499696c73.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
其中【匹配路径】为必填项,【推送资源】为非必填项。
以上两种方式,需要注意如下事项:
- 如果源站已经通过 Link 首部来实现服务推送,在 CDN 端的配置只需要配置【匹配路径】即可,无需配置【推送资源】选项;其中通过 Link 首部推送资源 CDN 已经默认开启。
- 如果在 CDN 端进行自定义 Server Push 推送资源配置,则优先级会高于源站设置的 Link 头部。
- 无论何种实现方式,总的(包括 Link 首部和 CDN 自定义的方式)推送资源数量不超过 8 个。
如何验证 Server Push 是否生效
1. 通过 Google Chrome 浏览器进行测试
在 CDN 控制台进行了如下配置:
![](https://upload-images.jianshu.io/upload_images/80097-b3a9cc92b9a72101.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
通过 Google Chrome 开发者工具进行抓包查看,推送的资源都被 Push 了,如截图所示:
![](https://upload-images.jianshu.io/upload_images/80097-b278002812145281.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
查看资源 /index.html 的资源响应头信息,并查看 x-upyun-h2-pushed 字段:
age: 501691 cache-control: max-age=691200 content-encoding: br content-type: text/html date: Thu, 19 Apr 2018 05:32:26 GMT etag: W/"86ef9cae8d9f9e1205b25357e78a149b" expires: Sat, 21 Apr 2018 10:10:55 GMT last-modified: Fri, 13 Apr 2018 10:10:45 GMT server: marco/2.1 set-cookie: UPYUNPUSH=582825323-1696419771-1484613131-3932011035; Max-Age=7200 status: 200 vary: Accept-Encoding via: T.205.M, V.403-zj-fud-207, S.mix-sd-dst-035, T.40.M, V.mix-sd-dst-044, T.136.H, M.cun-sd-lyi1-136 x-content-type: text/html x-request-id: 04dc2c7db2c509af1efc7d7252f0c2ce; 319efa6d981c0cb8dfb2b389368284f4 x-source: U/200 x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg
其中,x-upyun-h2-pushed 字段内容为:
x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg
也可以说明所配置的推送资源被成功 Push 了。
2. 通过 nghttp 工具进行测试
测试命令为:
nghttp -ans https://server-push.upyun.club/index.html
测试结果如下:
id responseEnd requestStart process code size request path 13 +112.01ms +69us 111.94ms 200 167 /index.html 8 +1.31s * +56.96ms 1.25s 200 314K /image/meinv4.jpg 6 +2.17s * +56.95ms 2.11s 200 628K /image/meinv3.jpg 4 +2.34s * +56.94ms 2.28s 200 717K /image/meinv2.jpg 2 +2.42s * +56.91ms 2.36s 200 726K /image/meinv1.jpg
从测试结果中可以看出,被推推送的资源在 requestStart 栏左侧以星号标记了出来。
推荐阅读:
一文读懂 HTTP/2 特性
从应用层协议协商机制看,是否应该选择支持 HTTP/2 的 CDN
参考文档:
HTTP/2 Server Push Service | Cloudflare
A Comprehensive Guide To HTTP/2 Server Push
Introducing HTTP/2 Server Push with NGINX 1.13.9 | NGINX