用SPDY加速web —— ”Making The Web Faster With SPDY“
2013-11-22 18:35
363 查看
原文: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想要克服的问题。
SPDY提供了如下功能来帮助解决这些缺陷。
程序员尝试使用HTTP管道来解决这一问题,但是HTTP连接先进先出(FIFO)的设计,已然会带来不少问题。(某个资源加载速度很慢会影响到后面所有的加载。)
注:HTTPArchive的一项研究显示,目前每个网站页面平均包含84个请求,到30个不同的域名。
现在有一些技术是把非必须的头给压缩掉,应该可以明显的减少时间。
Image Spriting - 将多个小图片合成一个sprite图,然后用一些高端的CSS来在页面上显示出正确的图片。
Concatenation and Minification - 将多个CSS或JS文件整合到一个中,来减少HTTP请求的次数。Minification指的是去除空白和其他填充性内容,来减小页面。
Domain Sharding - 将资源分散到多个子域名下,这样浏览器就可以打开更多的并发连接。
Inline Resources - 用Data URI来将图片嵌入到HTML代码中,目的还是为了减少HTTP请求数。
使用这些技术可以有效的降低页面加载速度,但是实现起来就及其操蛋了。修正掉HTTP1.1的这些问题就可以让开发者省心了。
而且,SPDY中的连接是双向的,所以流可以被客户端和服务器任意一段初始化。后面再详解。
这就解决了前文提到的HTTP的先进先出(FIFO)的问题。
SPDY的团队也在尝试删除部分不需要的头,例如,当user-agent头被送到服务器后,在session有效期内,我们有理由相信它不会再变。所以完全可以在后面的请求中把它剔干掉。
例如,服务器可以解析一个HTML页面看其是否包含一个引用CSS的<link>元素。传统方式中,服务器要等到客户端请求该CSS文件才把它发过去。而我们明知道客户端肯定要用它,干嘛不自动发过去呢?这样还能额外节省一个客户端请求到服务器的延迟时间呢。
原则上,这种做法跟用DATA URI嵌入图片是类似的。我们知道这个资源是肯定需要的,所以减少一个额外请求是完全OK的。
Apache用户可以使用mod_spdy的组件。
Nginx用户可以去瞧瞧ngx_http_spdy_module
注:你不需要为了使用SPDY而修改任何网站内容!
有一件事要注意的是,SPDY要求使用SSL。这会引入一个小延迟,但是保证了客户端和服务器之间的连接安全。
现在支持SPDY的浏览器有:Chrome,Firefox 和Opera。微软最近也确认了SPDY会被IE11所支持。
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
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
相关文章推荐
- 数据结构应用标准模版库STL——优先级队列(优先级队列排序)
- 简单的js calendar
- 用myEclipse8.5搭建安卓开发平台
- 【C#】Directory学习笔记
- ecommerce学习
- 索引图像
- Android getSystemService()
- POJ 1850 Code(组合数)
- 伊斯兰教义最早的中文记载
- java.util.regex包的功能
- 订阅任务
- 转:浅谈Spectral Clustering 谱聚类
- java注释详解--javadoc注释
- 【VC++游戏开发#六】2D篇 —— 粒子系统(一):浪漫唯美的场景之雪花飞舞
- Flume-ng Exec “丢数据” 推荐
- KMP 字符串模式匹配算法
- 注意小点
- 高亮显示代码编辑器控件【转】
- RGB转灰度值
- 口语联盟----------