前颜（yan）
雪碧图（css sprite ），就是把很多小图标合并为一张图片。
在web开发中，使用雪碧图是优化web性能的一种方法。
比如你可能遇到过这样的一种场景：在你的页面中，使用到了很多的小图标，然后你的每个小图标都是通过 <img src='logo.png'>来引用的。
通过这种方式虽然比较方便，但是存在的一个缺点就是性能问题，即浏览器在解析每个小图标时，都要发起一次http或（https）请求，而这个小图标本身却很小，可能只有十几k甚至几k，那么为每个小图标单独发起http请求，其实有点资源浪费。
为什么会资源浪费呢？
浏览器在与服务器进行http请求的过程中，需要有一个类似握手通信的过程，然后才是真正的获取数据。
举个例子，在这里我把浏览器发起的http图片请求简单分为两个过程，分别为：
1、浏览器与服务器的通信握手过程，假设耗时x ms（毫秒）
2、真正的数据获取过程，假设耗时 y ms（毫秒）
那么浏览器发起一次http请求的总耗时为：sum(1)=x+y ms，由于小图标数据很小，可能只有几k，因此通信过程的耗时x是大于y的。
而当你在网页中引用了很多小图标时，假设有n个小图标，此时总耗时为sum(n)=nx+ny ms，通过对比sum(1)和sum(n)，你就会发现，上面所说的资源浪费主要是在于通信握手的时间y。此时，我就会想，如果我一次性取得所有的小图标，那么总耗时就变成了sum(n)=nx+y ms，这样就能节省(n-1)y的http握手通信的时间开销，从而优化了web的响应性能。
一、雪碧图抠图（background-position）
通过前面的介绍，我们知道，雪碧图的原理就是将页面中使用到的小图标合成为一张总图。这样的话当我们想要使用雪碧图中的某一个小图标，应该通过如何实现呢？
答案是通过css的background-position，background-position的默认坐标是（0，0），关于background-position的详细使用，大家可以网上搜索一下，资料很多。（这次主要讲雪碧图制作工具）
二、雪碧图制作工具 simple-sprite
那么如何合成雪碧图呢？怎样才能更方便的合成雪碧图呢？
因为懒，我的想法是，每次当我需要合成雪碧图时，我只要经过以下尽量简单的步骤就可以快速合成，并且可以导出各个小图标在雪碧图中的background-position css样式。为此，我用nodejs写了一个雪碧图制作工具：，并打包生成npm包发布至npm官网。
雪碧图制作步骤如下：
1 创建雪碧图生成工程
mkdir sprite-generator cd sprite-generator
2 初始化工程
npm init
3 把所有小图标放到imgs中
mkdir imgs && 把所有的小图标放到imgs中
4 下载npm包
npm install --save simple-sprite
5 运行生成雪碧图
我要评论
let sprite = require('simple-sprite');
sprite.generatesprite('./imgs');
simple-sprite：
三、github源码
构建工具：rollup
github源码：https://github.com/simplecodecx/simple-sprite#readme
（如果你点开了我的github源码连接，顺便也帮我点个star哦！哈哈）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
网友评论