繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS Sprite优化:减少HTTP链接数
- CSS样式表
- 做网页中需要掌握的八个CSS布局技巧
- CSS属性 - white-space 空白属性使用说明
- 用CSS构建iframe效果代码
- 用div+css解决出现水平滚动条问题
- ul在Firefox和IE下的不同表现的解决方法
- 用css实现隐藏文本框
- css实现行间距效果
- 研究了一下div+css的高度自适应问题
- 做网页字体大小参考 网页中同字号字体的不同单位对比列表
- css 之 background-position-x
- css实现兼容各个浏览器的技巧的代码
- css中的行间距的代码
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- scrollWidth,clientWidth与offsetWidth的区别
- 大家需要掌握的 html下SPAN和DIV的区别
- 布局用CSS+DIV的优点总结
- 纯CSS生成抗锯齿圆角的代码
- IE6，IE7和firefox对DIV的支持区别
- DIV+CSS布局的网站对网站SEO的影响分析
- 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
CSS样式表 中的 CSS Sprite优化:减少HTTP链接数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 111 ::
收藏到网摘: n/a
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 的缺点是什么？
评论 (0) All
