常见的前端性能指标有哪些？

推荐答案

常见的前端性能指标包括：

1. 首次内容绘制（First Contentful Paint, FCP）：测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
2. 最大内容绘制（Largest Contentful Paint, LCP）：测量页面从开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。
3. 首次输入延迟（First Input Delay, FID）：测量从用户首次与页面交互（例如点击链接、按钮等）到浏览器实际能够响应该交互的时间。
4. 累积布局偏移（Cumulative Layout Shift, CLS）：测量页面在加载过程中元素的视觉稳定性，量化页面内容的意外移动。
5. 时间到交互（Time to Interactive, TTI）：测量页面从开始加载到所有资源加载完成并且页面能够可靠地响应用户输入的时间。
6. 总阻塞时间（Total Blocking Time, TBT）：测量页面在加载过程中主线程被阻塞的时间，影响页面的交互性。
7. 首字节时间（Time to First Byte, TTFB）：测量从浏览器请求页面到接收到服务器响应的第一个字节的时间。

本题详细解读

1. 首次内容绘制（FCP）

FCP 是衡量用户感知页面加载速度的重要指标。它表示用户首次看到页面内容的时间，通常与页面的视觉反馈相关。FCP 越短，用户感知的加载速度越快。

2. 最大内容绘制（LCP）

LCP 是衡量页面主要内容加载速度的指标。它表示页面上最大的文本块或图像元素完成渲染的时间。LCP 是用户体验的关键指标，因为它直接影响用户对页面加载速度的感知。

3. 首次输入延迟（FID）

FID 是衡量页面交互性的指标。它表示用户首次与页面交互到浏览器实际响应该交互的时间。FID 越短，页面的响应速度越快，用户体验越好。

4. 累积布局偏移（CLS）

CLS 是衡量页面视觉稳定性的指标。它表示页面在加载过程中元素的意外移动。CLS 越低，页面的视觉稳定性越好，用户体验越佳。

5. 时间到交互（TTI）

TTI 是衡量页面完全可交互时间的指标。它表示页面从开始加载到所有资源加载完成并且页面能够可靠地响应用户输入的时间。TTI 越短，页面的交互性越好。

6. 总阻塞时间（TBT）

TBT 是衡量页面主线程被阻塞时间的指标。它表示页面在加载过程中主线程被长时间任务阻塞的时间。TBT 越短，页面的交互性越好。

7. 首字节时间（TTFB）

TTFB 是衡量服务器响应速度的指标。它表示从浏览器请求页面到接收到服务器响应的第一个字节的时间。TTFB 越短，服务器的响应速度越快。