前端的性能统计有哪些指标？

前端性能统计指标有很多，可以大致分为以下几类：

1. 加载时间相关: 这组指标主要关注页面加载速度的各个阶段。

• FP (First Paint): 首次绘制的时间，浏览器开始将像素绘制到屏幕上的时间点，用户可以看到任何内容，即使只是一些背景色。
• FCP (First Contentful Paint): 首次内容绘制，浏览器渲染出第一个 DOM 元素的时间，例如文本、图片、SVG 等。用户可以看到一些实际内容。
• LCP (Largest Contentful Paint): 最大内容绘制，视口中最大的内容元素渲染完成的时间，通常是图片、视频或大块文本。代表用户感知到的主要内容加载时间。
• FMP (First Meaningful Paint): 首次有效绘制（已弃用，被 LCP 取代），页面主要内容出现的时间点，难以精确测量，因此被 LCP 取代。
• TTI (Time to Interactive): 可交互时间，页面变得完全可交互的时间点，即页面已呈现，可以响应用户输入。
• DOMContentLoaded: DOM 树构建完成的时间，不包括图片、样式表等外部资源。
• Load: 页面完全加载完成的时间，包括所有资源。

2. 用户交互相关: 这组指标关注用户与页面的交互体验。

• FID (First Input Delay): 首次输入延迟，用户第一次与页面交互（例如点击按钮、输入文本）到浏览器实际响应的时间。反映了页面的响应速度。
• INP (Interaction to Next Paint): 交互到下次绘制，衡量页面对用户交互的整体响应能力，取代 FID。
• CLS (Cumulative Layout Shift): 累积布局偏移，衡量页面布局的稳定性，避免页面内容突然移动造成不好的用户体验。

3. 资源加载相关: 这组指标关注各种资源的加载情况。

• DNS 解析时间: 将域名解析为 IP 地址的时间。
• TCP 连接时间: 建立 TCP 连接的时间。
• SSL 握手时间: 完成 SSL 握手的时间（如果使用 HTTPS）。
• TTFB (Time to First Byte): 首字节时间，从请求发出到收到第一个字节的时间，反映服务器响应速度。
• 资源下载时间: 下载各种资源（HTML、CSS、JavaScript、图片等）的时间。

4. 其他指标:

• 白屏时间: 用户看到空白页面的时间，通常是从页面开始加载到 FP 的时间。
• 首屏时间: 用户看到首屏内容的时间，通常是从页面开始加载到 LCP 的时间。
• 页面大小: 页面所有资源的总大小，影响加载速度。
• 请求数量: 页面发出的请求数量，过多的请求会增加加载时间。

如何获取这些指标：

• Chrome DevTools: Performance 面板可以详细分析页面加载性能，并提供各种指标数据。
• Lighthouse: Chrome DevTools 中集成的工具，可以对页面性能进行评估，并提供改进建议。
• WebPageTest: 在线网站性能测试工具，可以模拟不同网络环境下的页面加载情况。
• Performance API: JavaScript API，可以用来测量各种性能指标。
• 监控平台: 例如 Google Analytics、百度统计等，可以收集用户访问页面的性能数据。

选择哪些指标取决于你的具体需求和目标。例如，如果你的目标是提高页面加载速度，那么应该关注 FP、LCP、TTI 等指标。如果你的目标是提高用户交互体验，那么应该关注 FID、INP、CLS 等指标。

希望以上信息对您有所帮助！