在当今的移动互联开发趋势中,nghttp2是一个很值得大家去关注的一个开源项目。
我们在nghttpx模块中实现了HTTP/2服务器推送功能,并且在我们的nghttp2.org网站中启用了该推送功能。当你通过HTTP/2协议访问 https://nghttp2.org网站时,CSS文件/stylesheets/screen.css就会被推送到客户端。
nghttp2 blog
当你通过网络浏览器的调试功能观察该页面的加载过程的时候,你会发现有不少东西会冒出水面给你个惊喜:
大家可以看到图片中的 response
应答包头包含了一个 link:
的资源属性来发送额外的内容到浏览器客户端,而这个过程其实并不需要浏览器客户端主动的去请求的(因此这就需要对该DOM结构进行相应的解析了)。这向大家展示了真正的HTTP/2服务器推送功能了。
注意: 为了在你的浏览器调试界面的网络标签中显示出HTT/2协议信息, 请运行Chrome Canary这个版本的浏览器,详情请看http://ma.ttias.be/view-httpspdyhttp2-protocol-google-chrome/
这种服务器进行推送的方式所带来的好处是让下载stylesheet的过程更加快速。这你可以通过比较访问传统的HTTP/1.1网站和开启了服务器推送功能的HTTP/2的网站就很容易看出来了。
传统的HTTP/1.1页面加载
比如,以下图片显示的就是通过典型的传统HTTP/1.1协议方式访问我的博客网站时的流程。
从上图可以看到,在 GET /
这个请求发出后,就会需要等待大概20毫秒的时间去解析网页内容,然后才会开始对下一个资源 widget.css
的请求。
启动了服务器推送的HTTP/2网页加载
相比HTTP/2的流程:
从中可以看到,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 |