性能优化 —— base-64 格式的图片 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第5天

在项目开发过程中，性能优化是不可缺少的一部分，将图片转为base64格式是性能优化的方法之一。

在大项目开发中难免需要引用网络上的图片，如果项目中的每一张图都需要对网络进行请求，那性能会大大降低。因此，学会如何减少项目中的图片请求，是对项目进行性能优化不可或缺的一步。

将图片格式转为 base-64

base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址

如图上面的代码是传统引入 img 的方式而下面的是 base-64 引入 img 的方式

传统引入图片的坏处： 浏览器在请求网页的时候，是先把 html 的标签请求下来，其中不包括图片。每一张图片需要再利用请求获取，如上图这样多张图片的话，就需要请求多次

提升性能：网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64 可以随着 HTML 的下载同时下载到本地，减少 https 请求。
加密：让用户一眼看不出图片内容，只能看到编码。
方便引用：在多个文件同时使用某些图片时，可以把图片转为 base64 格式的文件, 把样式放在全局中，比如 common.css，以后在用的时候就可以直接加类名，而不需要多层找文件路径，会提升效率。

将图片转为base-64的时候，体积会变大，一般只将小图片如 logo ，精灵图里的小图标等转为 base-64 。而如轮播图这样本身体积就大的图片，转为 base-64 会变得更大，这样就得不偿失了。