前端性能分析与优化--图片资源

常见图片格式

详见：聊一聊几种常用web图片格式：gif、jpg、png、webp

图片应用场景

普通展示图片、图标等

示例

代码：https://github.com/js-fu/js-fu.github.io/tree/master/fe-img

1.html 普通静态页面

https://js-fu.github.io/fe-img/1.html

首先看到这是一个的普通静态页面，一个图文列表。在Disable cache和Slow 3G的环境下打开该页面，得到如下performance。

1.jpg

分析上图，可看出DOMContentLoaded事件在2.37秒执行。load事件要等到全部图片资源都加载完，到了29.81秒才执行。如果通过监听load事件的话，要等很久才执行，体验比较差。而且静态页面内容是固定的，不灵活。

DOMContentLoaded 和 load 事件
DOMContentLoaded: 当纯 HTML 被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。 $(function() {})
load: 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

优化

2.html 使用ajax获取图文列表数据

https://js-fu.github.io/fe-img/2.html

这个页面的标题“图文列表”，是固定的。图文资源模拟用ajax获取。同样在Disable cache和Slow 3G的环境下打开该页面，得到如下performance。

2.jpg

分析上图，可看出DOMContentLoaded事件在2.38秒执行，跟1.html差不多。load事件提前到了2.39秒，因为加载图片资源是异步去加载的。但是仍有一个问题，不在可视范围内的图片也加载了，不必要，可以等到页面滚动，等图片到了可视范围内再去懒加载。

3.html 懒加载

https://js-fu.github.io/fe-img/3.html

这个页面，在 2.html 的基础上增加了懒加载的功能。初始渲染页面的时候，只下载在了出现在首屏的两张图片。

原理：监听滚动事件、getBoundingClientRect

object.getBoundingClientRect()

4.html 预加载

https://js-fu.github.io/fe-img/4.html

这个页面，在 2.html 的基础上增加了预加载的功能。首屏显示loading蒙层和加载资源的进度条，等到加载完，展示实际页面，看图文列表里的图片都是预加载过的资源，浏览流畅很多。

5.html 雪碧图

https://js-fu.github.io/fe-img/5/5.html

对于一些小图片，比如图标等，可以采用雪碧图的方案，讲多个小图片合成一个图片，减少网络请求。

雪碧图

6.html iconfont

https://js-fu.github.io/fe-img/6.html

对于图标等，也可以采用字体图标iconfont代替图片，图标可以像字体一样修改大小、颜色等样式。

7.html base64

https://js-fu.github.io/fe-img/7/7.html

对于一些尺寸非常小的图片，可以使用base64的方案，将图片的base64编码写入html、css中。可以减少网络请求。

webpack配置中可以用url-loader，设置一个界限值，小于界限值的时候，会自动把小图片转成base64

8 骨架屏

9 检测设备网络状况，使用OSS服务，采用不同质量的图片，是图片大小和图片质量达到一个平衡

网络状况 MDN NetworkInformation

阿里云OSS ，可以实现图片质量变换、模糊、旋转、裁剪等操作。

其它

cdn、gzip等