图片懒加载对性能指标的影响
最近在给我们的图片统一包到一个组件内去，然后在这个图片组件内去做懒加载，也支持取消懒加载，图片占位，video懒加载，video标签兼容移动端 等等的功能。
此处谈谈为什么要这么干：图片懒加载对性能指标的影响
先说结论
| FP | TTI | DOMContentLoaded | Load | |
|---|---|---|---|---|
| 图片懒加载对性能指标的影响 | 不影响 | 不影响 | 不影响 | 影响 |
为什么不影响FCP、TTI？
目前浏览器对图片的加载做了优化
- 会把图片当做异步的模块，去加载解析。所以首屏不会等图片，会先渲染首屏的其他东西，比如文字 样式
为什么不影响DOMContentLoaded？
DOMContentLoaded 的定义：
- 当纯 HTML 被完全加载以及解析时，
DOMContentLoaded事件会被触发，而不必等待样式表，图片或者子框架完成加载。
为什么会影响Load指标？
Load指标的定义：
-
当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发
load事件。-
所以，如果图片没设懒加载的话，首页有100张图的话，会等这100张图都加载完，才会触发load事件！
-
另外，因为图片懒加载不影响FP，而且肯定会影响Load指标，那么首屏可视区的图片是不用设置懒加载，这样可能可以加快Load指标
-
-
它与
DOMContentLoaded不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。
如何验证？
在封装懒加载组件之前，有测过这些性能指标的影响，当时没记录
最近业务太忙了，文章几乎也是晚10点抽时间写的，时间有限，此处就不做验证了。有空的自己去验证试试
如何实现懒加载？
推荐一个开源库：lozad，www.npmjs.com/package/loz…
-
用起来还不错，体积也不大，gzip后 1kb+
-
功能也比较全，除了<img 外， video 等 也能支持
最后，要上手的话， 建议先最小单元模块测试 跑通三方库的使用，在用到项目内去。
zzz 码字不易，点赞鼓励！
