I am houbiao beta 0.1

CSS Sprite - 阅大牛文章有感

分类:Optimize

CSS Sprite - 有人叫他CSS精灵,也有人叫他CSS雪碧(都喝过雪碧吧,注意上边的单词了吗)。以下我就暂且简称“雪碧”。

看了好几篇介绍雪碧的文章,其中有很多不同的观点,推荐文章点此

好吧,前辈已经介绍的很详细了,下面咱就挑2点来粗略总结一下。

一、性能

性能一直都是前端们最追求最不可忽视的东西,运用任何一项技术之前一定要先权衡他的性能。雪碧给人的第一印象就是减少了HTTP请求,而且下载一个100K的大图一定比下载4个25K的下图来的快,没错,确实是减少了请求,但是呢,我相信大家的雪碧图里应该都有多余的空白吧(什么?你一点空白都没有,那你的资源利用的太好了),那么一个雪碧在我们浏览网站的时候内存的使用是怎么计算的呢?前辈们给出了测试得出的公式 透明的图片,内存占用是长*宽*4,不透明图片占用是长*宽*3,,比如雪碧图大小是1000*800,它在浏览器中占用内存是1000*800*3(4)=2.28(3.05)MB左右。所以过大的雪碧还是慎重一下,而且还要注意,如果你雪碧里是10张图,但是实际应用却只用到了4张,那么剩下的6张就是很大的资源浪费,一定要及时清理掉不使用的图片。还有个好的建议就是,将雪碧的层级分开存储,全局的,框架的,某一模块的。

二、缺点

缺点比较突出的有2点,首先雪碧调用的图片不能被打印,除非在@media中特别添加print声明。其次需要repeat的时候就不好处理了,当然你也可以将repeat-x的都放一起,repeat-y的放一起,但是这样做就有些浪费资源了。再次需要对雪碧进行更新的时候,相信用雪碧的人都遇到过,很麻烦是不是,改动一个地可能全局都要受影响,如果选择在后边追加新的图那么前面的又是资源浪费。即便现在已经有很好的工具雪碧生成工具了但是仍是需要工作量的,推荐工具点此

总结的很粗糙,有阐述不对的地方大家尽情指点。

3484 reads 0 comment

上一篇:双飞翼布局(三栏布局-左右固定-中间动态变化)及DOM优先加载

暂时还没有回复信息

Leave a comment

*