之前也整理过系列（一），有兴趣的请点击：系列一。这是我在学习的过程中遇到的易错的或者易掉坑的css知识点的总结整理，嗯，还是会持续更新的
2018/6/19
今天遇到了一个base64格式的图片数据，想要作为背景图片，嗯，这种不是直接写url地址即可，先看个小示例
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”/>
如果是背景图的话也是类似的
background-image:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”)
在上面的URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
下面是整理的类似的用法
- data:image/gif;base64,base64编码的gif图片数据
- data:image/png;base64,base64编码的png图片数据
- data:image/jpeg;base64,base64编码的jpeg图片数据
- data:image/x-icon;base64,base64编码的icon图片数据
2018/6/20
-- CSS性能优化问题 --
1. 加载方面
1）慎用 @import：import 会使我们的 link 样式由原本的并发加载，变成异步加载；
2）压缩代码体积：
a. 压缩代码，删除换行，多余的空格和注释；
b. 合并重复代码，提高代码的通用性；
c. 精简包含选择符，在使用包含选择的时候，尽量精简层级；
d. 能使用复合样式时，尽量使用复合样式；
e. 多利用继承，来精简样式；
2. 优化请求
1）使用 css 精灵，减少图片个数和体积；
2）合理合并文件，精简外部文件个数；
3）对于不需要重复使用的图片，可适当使用 data Uri；
4）在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；
3. 渲染方面
1）涉及动画方面，尽量可以使用位移来解决，努力减少回流；
2）涉及动画方面，可以利用 3D，来进行 GPU 加速；
3）避免使用 table，为了减少回流；
4）避免 text-shadow 和 box-shadow 层级过多；
5）减少浮动和绝对定位的滥用；
6）不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；