欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站建设News

HTTP/2 之服务器推送 (Server Push) 最佳实践

发布时间:2017:11:25 08:13:40 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1368个文字,预计阅读时间4分钟
导语
HTTP/1.X出色地满足互联网的普遍访问需求,但随着互联网的不断发展,其性能越来越成为瓶颈。IETF在2015年发布了HTTP/2标准, 着重于提高HTTP的访问体验, HTTP2优势主要包括: 二进制传输、头

  HTTP/1.X出色地满足互联网的普遍访问需求,但随着互联网的不断发展,其性能越来越成为瓶颈。IETF在2015年发布了HTTP/2标准, 着重于提高HTTP的访问体验, HTTP2优势主要包括: 二进制传输、头部压缩、多路复用和服务器推送(ServerPush)。

  截止目前, 大部分CDN厂商已经宣布支持HTTP/2,然而”支持”大多省略了服务器推送(ServerPush)特性。估计这和nginx开源版本没有支持Server Push相关。为提供完备的HTTP2能力,腾讯CDN现已完成HTTP/2的Server Push支持,并完成了详细的性能测试。

  序言

  在介绍Server Push功能之前,先来分析网站的加载过程。图1是腾讯课堂(http://ke.qq.com/index.html)的时间瀑布图。

  a)首先浏览器请求主页面index.html,服务端响应内容;

  b)获取到主页应答,浏览器开始解析主页的html标签,发现构建DOM树还需要CSS, GIF, JS等资源;

  c)发起针对CSS,GIF,JS的内容请求;

  d)获取并解析JS和CSS等内容, 然后继续请求依赖资源。

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图1 腾讯课堂域名的时间瀑布图

  图2是简化的浏览器和服务器的交互过程,横轴代表时间轴,每个虚线区间是1个RTT。红色竖线表示DOM 加载完成的时间。从图中可知,虽然存在并发传输, 但主页index.html和依赖的资源common.css、0684a8bf.css、comb.nowrap.0b772fee.js等总体上是顺序的,等待资源响应的时间减慢了主页面加载速度。并发传输并不能提高串行解析的资源访问体验。

  如果服务端接收到客户端主请求,能够“预测”主请求的依赖资源,在响应主请求的同时,主动并发推送依赖资源至客户端。客户端解析主请求响应后,可以”无延时”从本地缓存获取依赖资源, 减少访问延时, 提高访问体验,也加大了链路的并发能力。Server Push正是基于此原理来提高网络体验。

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图2 无服务器推送的数据交互

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图3 使用服务器推送的数据交互

  图3说明了若采用服务端推送的功能,则JS/CSS资源基本可以和HTML资源同步到达,浏览器可以“无延时”获取JS/CSS资源,客户端的延时最多可以减少一个RTT。

  构建一个简单的例子来验证我们的说法。图4所示为simple_push.html代码,页面依赖资源simple_push.js和simple_nopush.js,页面大小均不超过1KB,主要时间消耗在传输延时。如图5所示为推送simple_push.js和不推送simple_nopush.js的效果对比。

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图4 推送测试HTML代码

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图5 不推送&推送的效果对比

  我们上线了一个测试 demo网站 ( 点文字可直接访问 ) 。网页上展示一张世界地图,由400个小图片组成。对比三种访问方式:HTTP/1.1、HTTP/2(无Server Push)和 HTTP/2(Server Push)。Server Push选择推送第150~179个共30个小图。访问性能数据对比如图6所示:可以发现预推送比无推送有一定的性能提升(受网络延时和客户端行为影响,结果存在波动,后文有相应分析)。

  

HTTP/2 之服务器推送 (Server Push) 最佳实践

 

  图6 demo网站测试

  简要介绍了Server Push的优化原理之后,伴随而来的疑问,推送什么资源,怎么去推送,以及比其他优化技术有什么优势?读完本章,这些问题将一一得到解答,文章最后用实例展示Server Push的应用场景和性能优化效果。

  一、推送实现

  1.1. 标识依赖资源

  W3C 候 选推荐标准 ( 点文字可直接访问 ) 建议了依赖资源的两种做法:文件内标签和HTTP头部携带, 表示该资源后续会被使用, 可以预请求, 关键字preload修饰这个资源, 写法如下:

  a) 静态Link标签法:

  <linkrel="preload" as="style" href="push.css">

  b) HTTP头表示法: Link:<push.css>; rel=preload; as=style

  其中rel表明了资源是预加载的,as表明了资源的文件类型。另外,link还可以用nopush修饰,表示浏览器可能已经有该资源缓存,指示有推送能力的服务端不主动推送资源,只有当浏览器先检查到没有缓存,才去指示服务端推送资源,nopush格式写成: Link: ; rel=preload; as=script;nopush。

  1.2. 推送资源

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:短网址(short URL)系统的原理及其实现

下一篇:2018年即将到来的八大Web发展趋势

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信