CSS Sprite优化 减少HTTP链接数

CSS Sprite 最大的好处是:减少 HTTP 链接数。提高页面质量

页面上的数据,通过 TCP/IP 包传输。在 1M ADSL 环境下,网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图:
dsl-package-size.png

需要的包越少,意味着速度越快。

例子:淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输(5848 / 1460 = 4.005)。看数据,只多出了 8 bytes. 优化到 5840 bytes 后,就可以减少一个传输包。

也许吹毛求疵了,但对于关键页面,任何细节优化,有时都是值得的。

类似的,对于页面中的链接数量,也可以考虑浏览器的最大并发数来做细节优化。比如,在 Firefox 下,同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下:
http-request.png

当链接数从 6 的整数倍增 1 时,下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时,尽量减少到偶数,是一个不错的优化守则。

参考资料

  • CSS Sprites: Image Slicing’s Kiss of Death
  • CSS, Image Sprites, Background Images and Website Optimization

PS: 出一道题目考考大家:CSS Sprite 的缺点是什么?

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。 就是说, 子级
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。 本文给大家介绍用纯CSS
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。
在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。
css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。