前端性能优化-通用的缓存SDK（图片）

2017-08-01 本文已影响0人挨踢的菜鸟

使用图片的劣势：我们现在有很多特效（渐变、阴影、圆角等等）都可以用纯粹的html css svg等加以实现，实现这些效果少则数行寥寥代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。这些效果不但需要的空间小，而且在多设备、多分辨率下都能很好的工作。图片占用带宽，而且与分辨率息息相关。

备选技术：css效果、css动画、图标库使用字体的方式，保持文字的可搜索性同时扩展显示的样式

如果真的不能避免使用图片该怎么办？如何正确的使用图片呢

图片分类
- jpg
- png
- gif
- svg 可缩放矢量图形是基于可扩展标记语言
- APNG和webp格式尚未被web标准所采纳
图片使用
- 如果颜色丰富的照片，jpg是通用的选择
- 如果需要较通用的动画，gif是唯一可用的选择
- 如果需要清晰的图片且颜色丰富的图片，使用png
图片加载的方式
- 有一种加载先模糊后清晰，另一种是很清晰，但是逐行加载显示。（原因是图片本身压缩算法不同，在图片被生成的时候已经决定了图片在浏览器当中是如何表现的）
- 模糊到清晰（小波算法），逐行加载显示（离散余弦变换，使用实数）浏览器根据不同图片选择不同算法。更改文件后缀名不会影响加载方式，压缩算法读取是在文件头部。