css sprites现在非常普及了,因为它的优点非常明显——减少http请求数和下载更迅速。

前者非常好理解,N张小图片就是N个http请求数。然后把N张小图片合并成1张大图片,这样请求数就从N变为了1。这样可以节省了大量和服务器请求的时间,减低了对服务器的压力。后者则是合并大图片之后体积会更小,使图片读取起来耗时更少,而更小的体积对公司来说就是省钱。

但是我们在享受css sprites带来的大餐时,不要忽视css sprites的副作用。

一、使用css sprites后,再未加载完图片时,页面会相当丑陋

这个你完全可以想象,如果加载速度不够快的情况,你精心构筑的页面在背景图没加载的情况下显得那么寒酸。没有图标、没有背景、甚至没有导航。哪怕就是那么短暂的一刻,这个时候网站带给访问者的映像确实很糟糕。

二、css sprites使浏览器消耗了更多的内存

有一点是肯定的,合并后的大图比分散的小图体积更小,但是这个优点的背后就是给浏览器带来了额外的负担——更大尺寸的图片。这个和体积正好相反,无论多么小心,合并后的图片面积一定比原先分散的小图片的面积和更大。而浏览器在图片上消耗的内存(B)为:长(px)*宽(px)*4(如果去除透明效果的话*3)。也就是说一张1000*4000的图片能消耗近16MB的内存,但是可能它的体积不过10kb而已。这只是一个举例而已,但是在我们身边的网站中确实有这样的存在,甚至更离谱。也许是为了维护方便,但是事实上却增加了访问者的负担。

三、牺牲了代码的可读性

在使用css sprites时,我们会为图片做很多额外的动作,这些动作会导致修改原本的代码或者增加额外的代码,从而使页面的可读性下降。想一下吧,除了制作者本身,谁知道那个毫无内容的标签其实为了某个小图标呢?

四、打印时要小心

我们都知道浏览器在打印是默认是不打印背景图片的,呵呵。有意思吧,看看打印出的东西是啥样子的?这个需要我们用一个打印样式@media print {}来重新处理一下。

最后唠叨一下css sprites技术还是非常好用的,但是它不是免费的午餐。我们在享用它的同时更应该小心一点。我们做的是优化,任何对用户有碍的东西要尽可能去避免。优化往往是一种平衡,在得失之间怎么把握好尺寸会一直是我们的难题吧。

本文作者:admin 转载请注明来自:携程设计委员会