性能优化之详解各种指标

前言

上篇文章最后提到了我们可以通过performance的一些属性对性能做统计，我们会发现performance对象下有非常多的属性，远不止上篇文章提到的DOMContentLoaded与Load这两个事件。

或许你在浏览器控制台见过它们这些身影：DCL、LCP、FP、FCP、L

这里的DCL与L就是我们上篇文章介绍的DOMContentLoaded与Load这两个事件，那剩下的LCP、FP、FCP又分别代表什么呢？

在早期前端三剑客的时代或者现在的服务端渲染，DCL与L确实可以很好地衡量首屏内容展示时间，但对于现代各种框架盛行的单页应用，由于都是通过JS操作DOM向页面添加主要内容，DCL和L事件就不能很好地衡量首屏显示时间了。

于是有FP、FCP、FMP被提出来，它们关注的不是加载，而是渲染，因此能更好地表现用户看到的情况。

FP、FCP这两个指标虽然表达了渲染的事件，但对“用户关注的内容”没有体现，比如首屏渲染出来一个背景，或者一个loading，可能对于用户来说和白屏区别不大。FMP虽然体现了“关键内容”的要素，但它是复杂的、模糊的，甚至是错误的，并不能准确识别页面主要内容的加载时机。

后来LCP指标被提出来，表示“用于度量视口中最大的内容元素何时可见”，它用来代替FMP，表征页面的关键元素何时可以被用户看到。

除了加载性能，还有可交互时间、稳定性指标、流畅性指标，在不同的业务场景都可以被监控用来作为提升用户体验的依据。

性能相关

上面我们提到了各种性能相关的事件，那么它们各种代表的含义是什么呢？

关键事件

名词	全称	解释
FP	firstPaint	首次绘制
FCP	firstContentfulPaint	首次内容绘制
LCP	largestContentfulPaint	最大内容绘制
DCL	domContentLoaded	dom内容解析完成
L	loaded	页面的load事件

DCL（DOMContentLoaded）

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像