性能优化和一些奇奇怪怪小知识

关于页面图片的加载效果

Q： 在浏览器上加载图片的时候，我们时常遇到两种加载模式。第一种是图片由模糊到清楚，第二种是由上而下的加载，这两种加载方式具体有什么不同呢？还是说和图片本身的格式有关？

解答

• 加载方式其实取决于图片文件本身的压缩方式

  • 模糊 -> 清晰 ：小波算放
  • 自上而下 ：离散余弦变换，类似于离散傅里叶变换，但只使用实数。

• 浏览器根据图片不同的压缩方式选择不同的渲染算发。更改文件后缀名不会影响加载方式，因为压缩的算放是读取文件头。

图片资源的响应式

• 有时候我们期望在不同的分辨率下展示不同尺寸的图片，而一个叫 <picture> 的标签渐渐被浏览器采纳，具体使用参照 MDN