前端试题-什么是css sprite?优缺点？

Posted 2020-06-13

CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样，在访问页面时，就只需请求一次就可以了，而不必一次次向服务器发送请求。

它的原理就是把见面中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”,”background-repeat”,”background-position”的组合进行背景定位，实现多个位置的背景，一张图来搞定。

优点

1 减少网页的http请求，提高页面性能

2 减少图片字节

3 解决比较头疼的命名问题，以前好多张一个个想名字，现在一个名字就搞定

4 更换整个网页风格时更方便，更易维护

缺点

1 图片合并时，要把多张有序合理合并成一张，还要留好足够的空间，防止板块内出现不必要的背景，如果在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂

2 拼合图片的时间成本加大，CSS Sprites在开发时，需要通过photoshop或其他工具测量计算每一个背景单元的精确位置

3 编码和维护的时间成本会增加，CSS Sprites在维护时，如果页面背景有少许改动，一般就要改这张合并的图片，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。相对于一个可以轻松计算出来状态位置的简单按钮来说，大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

4 不是所有图片都是背景， 背景图片应该留给按钮以及用来装饰元素，而用来传达重要信息的图像应该内联在 Xhtml 中。

 

总之，CSS Sprite是很有用，但也不要一味滥用而超出一个度的限制，需明白过犹不及。