用SPDY加速web —— ”Making The Web Faster With SPDY“

原文:http://blog.teamtreehouse.com/making-the-web-faster-with-spdy


SPDY(发音speedy)是一项通过修正一系列HTTP1.1缺陷来降低页面加载时间的技术。它不是HTTP的替代品,而是引入了一些组建来提高页面响应速度。

SPDY最初是由Google开发,几乎用在Google所有的产品上。现在被Facebook, Twitter, WordPress.com等公司广泛应用。

在本文中,你会了解到SPDY是如何工作的以及它是如何提高页面响应的。



注:HTTP2.0 小组决定用SPDY来作为HTTP2.0协议制定的起点,而SPDY本身却并不是为了取而代之而设计的。



SPDY是如何融入现有框架的

SPDY在请求栈中加入了额外的一层,由此来扩展HTTP的功能。


在我们进一步研究SPDY所引进的组件前,我们先来看看SPDY想要克服的问题。


HTTP1.1所引进的问题

HTTP1.1中的不少缺陷影响了客户端和服务器之间的请求效率。正是这些缺陷限制了你的网站的响应速度。

SPDY提供了如下功能来帮助解决这些缺陷。

连接数的限制

由于HTTP原生的设计,每个资源要求一个单独的HTTP请求。目前的浏览器最多只支持6个并发连接到服务器,也就是说,如果你的网站在同一个服务器上请求了超过6个资源,浏览器就必须等待一个资源下载完毕,才能执行下一个请求。这大大影响了页面加载速度。


程序员尝试使用HTTP管道来解决这一问题,但是HTTP连接先进先出(FIFO)的设计,已然会带来不少问题。(某个资源加载速度很慢会影响到后面所有的加载。)



注:HTTPArchive的一项研究显示,目前每个网站页面平均包含84个请求,到30个不同的域名。


HTTP头

HTTP的另一个问题是适用了未压缩或无用的头。HTTP头是web事务工作的基础,但是头本身的数据也需要经过传输,所以越多的头,就意味着request会越慢。

现在有一些技术是把非必须的头给压缩掉,应该可以明显的减少时间。


开发者的临时方法

前端开发者有如下策略来减少加载时间:

Image Spriting - 将多个小图片合成一个sprite图,然后用一些高端的CSS来在页面上显示出正确的图片。

Concatenation and Minification - 将多个CSS或JS文件整合到一个中,来减少HTTP请求的次数。Minification指的是去除空白和其他填充性内容,来减小页面。

Domain Sharding - 将资源分散到多个子域名下,这样浏览器就可以打开更多的并发连接。

Inline Resources - 用Data URI来将图片嵌入到HTML代码中,目的还是为了减少HTTP请求数。

使用这些技术可以有效的降低页面加载速度,但是实现起来就及其操蛋了。修正掉HTTP1.1的这些问题就可以让开发者省心了。


用SPDY来解决问题

现在你了解了SPDY想要解决的问题,那么我们来看看SPDY的主要组件。


Multiplexd streams 多路流

SPDY中将请求映射成流(stream),它允许在同一个连接中包含多个流。这大大减少了创建连接的开销。

而且,SPDY中的连接是双向的,所以流可以被客户端和服务器任意一段初始化。后面再详解。


Prioritized streams 分级流

SPDY的流有优先级的定义。客户端可以通知服务器某项资源比其他更加重要,所以当带宽允许时,该资源会被第一时间发送。

这就解决了前文提到的HTTP的先进先出(FIFO)的问题。


Header compression头压缩

SPDY压缩了请求和响应的头,由此减小了需要发送的数据量。由Google所进行的一项实验表明,SPDY可以压缩大约88%的请求头大小和大约85%的响应头大小,从而减小了大约45到1142毫秒的页面加载时间。

SPDY的团队也在尝试删除部分不需要的头,例如,当user-agent头被送到服务器后,在session有效期内,我们有理由相信它不会再变。所以完全可以在后面的请求中把它剔干掉。


Server push 推送

SPDY的另一个很棒的组件就是创建了由服务器端初始化的流,这就可以让服务器对客户端进行推送,而不需要客户端发送任何请求。


例如,服务器可以解析一个HTML页面看其是否包含一个引用CSS的<link>元素。传统方式中,服务器要等到客户端请求该CSS文件才把它发过去。而我们明知道客户端肯定要用它,干嘛不自动发过去呢?这样还能额外节省一个客户端请求到服务器的延迟时间呢。

原则上,这种做法跟用DATA URI嵌入图片是类似的。我们知道这个资源是肯定需要的,所以减少一个额外请求是完全OK的。


开始使用SPDY

现在你明白了SPDY能干什么了,我肯定你会好奇怎么来用它。好消息是SPDY已经步入潮流了。正之如我前面所提到的,包括Google,Facebook和Twitter都已经在他们的商用系统上使用了。

Apache用户可以使用mod_spdy的组件。

Nginx用户可以去瞧瞧ngx_http_spdy_module



注:你不需要为了使用SPDY而修改任何网站内容!


有一件事要注意的是,SPDY要求使用SSL。这会引入一个小延迟,但是保证了客户端和服务器之间的连接安全。


现在支持SPDY的浏览器有:Chrome,Firefox 和Opera。微软最近也确认了SPDY会被IE11所支持。


后记

希望你现在对SPDY是什么以及如何工作有一些基本了解了。

SPDY承诺会让前端开发者的生活简单起来,不用再去用临时方法解决HTTP1.1的瓶颈。Image sprite和Domain sharding的日子就要到头鸟~


有用链接:

High Performance Browser Networking by Ilya Grigorik

Apache Module: mod_spdy

Nginx Module: ngx_http_spdy_module

SPDY: An experimental protocol for a faster web

Can I use SPDY?

SPDY Website Checker


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章