CSS Sprite优化 减少HTTP链接数
发布时间：2009-08-03 00:25:04 作者：佚名 
我要评论
我要评论CSS Sprite 最大的好处是：减少 HTTP 链接数。提高页面质量
页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图：
需要的包越少，意味着速度越快。
例子：淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。
也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。
类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox 下，同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下：
当链接数从 6 的整数倍增 1 时，下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时，尽量减少到偶数，是一个不错的优化守则。
参考资料
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS, Image Sprites, Background Images and Website Optimization
PS: 出一道题目考考大家：CSS Sprite 的缺点是什么？
相关文章
css sprites技术将多个背景集成到一个png图片上css定位
美国YAHOO在页面制作中所用到的图片整合技术，首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位，感兴趣的朋友可以了解下具体的实现方法2013-04-02使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
CSS sprites(CSS图片精灵)已经存在很久了。事实上，八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要2012-12-24css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西，涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣，所以会去了解多一点2012-12-03- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
- 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS2011-06-21
- CSS Sprites的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度2011-05-11
- 最近在网上闲逛，然后发现了一个用css sprite技术打造的导航，颇为简便和易用。由于图片的切换没有用到任何js，所以显得干净整洁。具体想知道什么是css sprite技术的，可以2011-01-26
- 无处不在的 CSS sptites － 为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。2010-04-17
- 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS2009-09-16
- 论坛上提到这样的问题：“css中用一张背景图做页面的技术有什么优势？” 简单介绍一下 CSS Sprites 的优点： 当用户往U盘中拷200张图片，会等很久。但是2009-06-21
最新评论