前端常见的优化问题 - 好文

（一）Sprites(背景精灵图/雪碧图)

1-将多张零星图片或者图标都包含到一张大图里面，这样就只需要加载这个一个图片，而不是很多个图片了，这样就减少了很多http的请求

2-利用CSS的background-image，background- repeat，background-position的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置；

（二）base64

1-将小图片它的阈值不大于8192KB的转换成base64格式的字符串；

2-通俗点讲：将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。
比如一张图片转成base64编码后就像这样，图片直接以base64形式嵌入文件中；

3-解决方案：webpack中的url-loader可以完成这个工作，可以对限制大小的图片进行base64的转换，非常方便。

4-优点：

* base64的图片会随着html或者css一起下载到浏览器,减少了请求.
* 可避免跨域问题
5-使用场景：

* 应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
* 用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片。
6-需要注意的地方是请看清楚，是阈(yu)值，千万不要读成阀值了。哈哈哈，之前就读错了，被大表哥一顿羞辱。惭愧惭愧。

（三）图标字体

用过bootstrap的同学肯定对方便的fontawesome图标字体印象深刻，可以无损放大缩小，可以修改颜色，只要加个类名就可以使用图标，感觉是不是很爽
至于优势就是矢量&方便好用。

（四）Vue里面的优化，设置公共地址

1-试想一下，如果大家的组件比较多，但是又要使用axios或者Ajax发送请求去后台请求数据，难道我们要一个一个的复制粘贴吗？不嫌麻烦吗？
当然这里有一个非常棒的优化，如下：

先写到这里，后面有时间再添加。。。

热门工具换一换