前端性能优化

1. 图片的优化
1. png 无损压缩 支持透明 颜色色彩好 体积大
适合 矢量图标 logo

2. jpg jpeg 有损压缩 不支持透明 体积小
适合轮播图和背景图

3. svg 无损压缩 体积小 兼容性好
svg的体积小于 jpg 小于 png 本身类似于 html一样
缺点 浏览器的渲染成本高

4. base64 小图标解决方案 依赖编码实现
用于大图的话，编码的体积会大于原来图片的体积
可以减少网络请求，提高页面的性能

5. webp 有损压缩和无损压缩 支持透明 gif动图
兼容性不好， 不考虑兼容性的话，webp是最好的，

6. gif 无损压缩 支持透明和动画
但是只支持 256种颜色

总结
webp 是最好的 但是 兼容性很差 会增加服务器的负担
base64 小图片永远的神， 加快首次渲染的速度，减少http请求
gif 动画图片永远的神
png logo 和矢量

前端性能优化最先出现在Python成神之路。