作为一枚前端coder，拿到设计稿时便已构思好了这个页面的布局，要用到的元素，UI该怎么切图，怎么实现性能最优，这些都是一个前端在coding中必须把控好的原则。
前端性能优化有很多入口，如今一些网站丰富多彩，绚丽夺目，图片元素占了很大一部分比例，所以处理好图片的加载、减少网络请求是非常有必要的，CSS Sprite就是一种方式。
CSS Sprite（css精灵），就是将一些零星图片（一般多用于icon）都包含到一张大图中去，通过CSS的“background- size”，“background-position”的组合进行背景定位，background-position可以定位出所需要小图的位置，从而达到展示图片的效果。
CSS Sprite的优点：
1.减少网页的http请求，提高页面的性能
2.能减少图片的字节，多张图片合并成1张图片的字节总是小于多张图片的字节总和的
3.减少命名的困扰，一张图片命名解决n张图片的命名。虽然这是一个小事情，但是对于爱纠结和选择困难症的coder来说总是在命名上耗费不少时间呢
4.对于一个项目维护来说图片一目了然，很清晰
CSS Sprite的缺点
1.如果在项目维护工程中部分图片有更改，最好事先在小图之间留下足够的空白，这样后面只需改动要修改的图片，其他的图片坐标互不影响
2.将所有的小图合在一起需要耗费时间，但是今天就是给大家推荐一款在线合成的网站，无需ps，只需要选中要上传的图片点击上传即可
网址：https://www.toptal.com/developers/css/sprite-generator
效果如下：
左侧的padding设置是小图之间间距，可自由设置，右侧是设置最后生成图片的排列方式，下面所有小图的宽高以及位置都显示出来了，接下来只需要到css里设置就好啦。
这里要注意的一点是，假设是移动端750*1334的设计稿，那么我们在处理一个70*70大小的图片时，需要设置图片的实际宽高是35*35，那么这个时候设置background-size就应该是生成的图片大小除以2，background-position也是现有标注的位置除以2，这样取到的图片才会正常且完整地显示为35*35的图片。
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论