你知道雪碧图吗？有哪些优缺点？

这道题实际上考的是前端性能优化的一个点。 雪碧图的英文是CSS Sprites。 其目的是将多张比较小的图片，合并到一张大的图片上面，大的图片背景透明，使用的时候，通过把该张图片当做背景图片，通过不同的 background-position定位来展示的那部分图片。 好处 降低服务器压力。 减少网络请求，页面渲染更快。 缺点 后期维护困难，添加一张图片需要重新制作。 应用麻烦，每一张图都需要计算位置，通过调整位置来展示图片，对误差的要求很严格。 使用图片有局限，只能用在背景图片background-image上，不能用标签来使用。 制作雪碧图 推荐一个在线制作雪碧图的网站:网站 制作展示 只需要将自己想要的图片上传上去，就可以生成右边的雪碧图了，下载图片，就可以引用了，可以直接复制坐标的css代码来引用图片。 下面贴一个完整的例子： 可以看到整个就引用了一张背景图片，减少了网络请求，但一定程度上增加了客户端内存消耗，通过background-position来设置图片的位置，达到显示想要的部分背景图的目的。 雪碧图使用场景 主用在网站的icon上面，很多网站都有很多小图标，这些小图标如果都是单独请求网络，务必会消耗很多玩网络资源（每次请求都会有一个连接与断开的时间消耗），但是比较大的图片，就不建议用雪碧图，因为图片太大，一次请求获取的数据量大，拿到这个大图需要的时间就长，降低了网页的整体体验。 线上体验地址: 地址 所有的源码都可以在我的仓库地址： 地址 学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。 公众号前端每日面试： 公众号

本文章由javascript技术分享原创和收集