前端的性能统计涉及多个关键指标，这些指标有助于衡量页面的加载速度、渲染效率以及用户交互的响应性。以下是一些主要的前端性能指标：
-
FP（First Paint Time）白屏时间：
- 定义：从页面开始加载到浏览器中检测到任何渲染（如背景改变、样式应用等）的时间。
- 意义：白屏时间过长可能让用户认为页面不可用或性能差。
-
FCP（First Contentful Paint）首屏时间：
- 定义：从页面开始加载到页面内容的任何部分（如文本、图像等）首次呈现在屏幕上的时间。
- 意义：反映用户何时开始接收到有用信息，是衡量加载速度感知的重要指标。
- 优化目标：通常建议将FCP控制在1.8秒以内。
-
LCP（Largest Contentful Paint）最大内容绘制时间：
- 定义：视窗内最大可见图片或文本块完成渲染的时间。
- 意义：帮助捕获首次渲染之后的加载性能，反映页面主要内容的加载效率。
- 优化目标：LCP应小于或等于2.5秒以提供合格的用户体验，若超过4秒则被认为性能较差。
-
FID（First Input Delay）首次输入延时：
- 定义：从用户首次与页面交互（如点击、输入等）到浏览器实际开始处理该事件的时间。
- 意义：衡量页面对用户交互的响应速度，直接影响用户对网站质量和可靠性的印象。
- 优化目标：为了提供良好的用户体验，应将FID控制在100毫秒以内。
-
TTI（Time To Interactive）首次可交互时间：
- 定义：页面从开始加载到其主要子资源加载完毕，且能够快速响应用户输入的时间。
- 意义：反映页面何时准备好进行交互，是衡量页面整体加载性能的重要指标。
-
TBT（Total Blocking Time）总阻塞时间：
- 定义：从FCP到TTI之间，主线程被阻塞的总时长。
- 意义：衡量页面加载过程中，主线程因长任务而无法响应用户输入的时间，有助于识别和优化性能瓶颈。
-
CLS（Cumulative Layout Shift）累计布局偏移：
- 定义：页面加载过程中元素布局发生变化的累计量。
- 意义：反映页面内容的稳定性，过多的布局偏移可能导致用户体验下降。
- 优化目标：为了提供良好的用户体验，应将CLS控制在0.1以内。
这些指标可以通过各种前端性能监控工具（如Google PageSpeed Insights、WebPageTest、Lighthouse等）进行测量和分析，帮助开发者识别性能瓶颈并制定相应的优化策略。
