性能优化之详解各种指标

最新推荐文章于 2024-10-18 08:29:20 发布

jklkk88888

最新推荐文章于 2024-10-18 08:29:20 发布

阅读量167

点赞数 1

文章标签：性能优化

本文链接：https://blog.csdn.net/2301_78945884/article/details/131645820

版权

本文详细介绍了前端性能优化的各种关键指标，包括DOMContentLoaded、Load、FP、FCP和LCP。DOMContentLoaded和Load事件分别在HTML解析完成和所有资源加载完毕时触发，FP和FCP关注页面渲染，而LCP则衡量页面最大内容元素的加载时间。文章讨论了这些指标的计算、应用场景以及它们之间的关系，旨在提升用户体验。

摘要由CSDN通过智能技术生成

前言

上篇文章最后提到了我们可以通过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事件