拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能

拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能_第1张图片

 

在当今的移动互联开发趋势中,nghttp2是一个很值得大家去关注的一个开源项目。 

我们在nghttpx模块中实现了HTTP/2服务器推送功能,并且在我们的nghttp2.org网站中启用了该推送功能。当你通过HTTP/2协议访问 https://nghttp2.org网站时,CSS文件/stylesheets/screen.css就会被推送到客户端。
nghttp2 blog

当你通过网络浏览器的调试功能观察该页面的加载过程的时候,你会发现有不少东西会冒出水面给你个惊喜:

拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能_第2张图片

 

大家可以看到图片中的 response 应答包头包含了一个 link: 的资源属性来发送额外的内容到浏览器客户端,而这个过程其实并不需要浏览器客户端主动的去请求的(因此这就需要对该DOM结构进行相应的解析了)。这向大家展示了真正的HTTP/2服务器推送功能了。

注意: 为了在你的浏览器调试界面的网络标签中显示出HTT/2协议信息, 请运行Chrome Canary这个版本的浏览器,详情请看http://ma.ttias.be/view-httpspdyhttp2-protocol-google-chrome/

拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能_第3张图片

这种服务器进行推送的方式所带来的好处是让下载stylesheet的过程更加快速。这你可以通过比较访问传统的HTTP/1.1网站和开启了服务器推送功能的HTTP/2的网站就很容易看出来了。

传统的HTTP/1.1页面加载

比如,以下图片显示的就是通过典型的传统HTTP/1.1协议方式访问我的博客网站时的流程。

拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能_第4张图片

从上图可以看到,在 GET / 这个请求发出后,就会需要等待大概20毫秒的时间去解析网页内容,然后才会开始对下一个资源 widget.css的请求。

 

 

启动了服务器推送的HTTP/2网页加载

相比HTTP/2的流程:

拥抱HTTP2.0时代 - HTTP2.0实现服务器端推送Push功能_第5张图片

 

从中可以看到,DOM和其他额外的资源都不需要进行解析,客户端就已经可以下载 screen.css 这个资源了。这就不需要“浪费时间”在处理DOM和哪些额外的资源上面了,需要做的仅仅是发送另外一个请求到服务器端去把它们拿下来而已。

 

一旦你在你的一个页面中的所有资源都加上该功能后,你就很大可能为你的网站该网页的加载/渲染速度省掉100-200毫秒了。这些数据相信已经足够吸引你来实现HTTP/2功能了吧。

就响应速度和网页速度来说,HTTP/2将会给你带来巨大的惊喜--特别是当你使用了服务器端推送功能之后。

-----------------------完---------------------

引用英文连接:http://ma.ttias.be/service-side-push-http2-nghttp2/?s=hn

 

请尊重原创作/译者

微信知识共享公众号

CSDN

天地会珠海分舵

TechGoGoGo

http://blog.csdn.net/zhubaitian

 

你可能感兴趣的:(http)