前端开发者需要关注以下多种性能指标，这些指标从不同维度反映了页面的性能和用户体验：
- 加载时间
- 首次内容绘制（FCP，First Contentful Paint）：度量从页面开始加载到页面内容的任何部分在屏幕上呈现的时间。这可以是文本、图像、SVG 等。FCP 时间越短，用户等待看到页面内容的时间就越少，能提升用户对页面加载速度的感知。
- 最大内容绘制（LCP，Largest Contentful Paint）：记录页面视口内最大的内容元素绘制到屏幕的时间点。通常，这个元素可能是一张大图片、主要的文本块等。理想的 LCP 应在页面开始加载后的 2.5 秒内发生。
- DOM Content Loaded（DOM 内容加载完成）：当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件就会被触发，而无需等待样式表、图像和子框架的完成加载。这一指标反映了页面结构的加载速度，对于那些不需要等待所有资源都加载完成就可以进行交互的页面功能很重要。
- 页面加载完成（Load Event）：当页面的所有资源（包括图像、脚本、样式表等）都已加载完成时，会触发 Load 事件。它衡量了整个页面从开始加载到完全准备好的总时间。
- 交互性
- 可交互时间（TTI，Time to Interactive）：表示页面从开始加载到主要子系统（如 JavaScript 执行、渲染等）都已就绪，用户可以与页面进行可靠交互的时间点。TTI 受阻塞渲染的脚本、样式表以及网络延迟等因素影响，优化 TTI 可以提高用户体验，让用户更快地进行操作。
- 首次输入延迟（FID，First Input Delay）：记录从用户首次与页面交互（如点击、按键等）到浏览器实际能够响应该交互的时间。FID 主要受主线程繁忙程度的影响，例如长时间运行的 JavaScript 任务会阻塞主线程，导致 FID 增加。
- 视觉稳定性
- 累积布局偏移（CLS，Cumulative Layout Shift）：用于衡量页面在加载过程中，可见元素的布局发生偏移的程度。布局偏移可能是由于资源加载、DOM 结构变化等原因导致的元素位置或大小的突然改变。CLS 可以帮助开发者发现并修复那些可能会让用户感到困扰的视觉不稳定问题。
- 资源请求
- 请求数量：页面加载过程中发出的资源请求总数，包括 HTML、CSS、JavaScript、图像、字体等。过多的请求会增加网络开销和延迟，开发者可以通过合并文件、减少不必要的资源加载等方式来优化。
- 请求大小：每个资源请求的大小以及所有资源请求的总大小。较大的资源文件会延长下载时间，通过压缩文件、优化图像等手段可以减小资源大小，提高加载速度。
- 渲染性能
- 帧率（FPS，Frames Per Second）：衡量页面动画或滚动时的流畅度。理想情况下，页面应保持 60 FPS 的帧率，以提供流畅的视觉体验。如果帧率过低（如低于 30 FPS），动画和滚动会显得卡顿。
- 主线程时长：主线程用于执行 JavaScript 代码、渲染页面等操作。过长的主线程任务会阻塞页面的交互和渲染，开发者可以通过分析主线程时长，找出耗时较长的任务并进行优化，如将一些任务转移到 Web Workers 中执行。
- 网络性能
- 带宽利用率：了解页面在加载过程中对网络带宽的使用情况。合理利用带宽可以提高资源的下载速度，但过高的带宽占用可能会影响其他应用的网络使用。开发者可以通过优化资源加载策略，如采用适当的缓存策略、按需加载等，来平衡带宽利用率。
- 网络延迟（RTT，Round-Trip Time）：指从发送请求到接收到响应的时间间隔。网络延迟会影响页面的加载速度和交互性，尤其是在网络条件较差的情况下。开发者可以通过优化服务器端配置、使用 CDN（内容分发网络）等方式来降低网络延迟。
- 内存占用
- 检测内存泄漏：内存泄漏是指程序中已动态分配的内存由于某种原因未释放或无法释放，导致系统内存浪费，最终可能使程序运行变慢甚至崩溃。通过查看页面内存占用情况，前端开发者可以监控内存使用量随时间的变化。如果发现内存占用持续上升且没有下降的趋势，很可能存在内存泄漏。例如，在使用 JavaScript 操作 DOM 元素时，若没有正确地移除事件监听器，当元素被删除但事件监听器仍然存在时，就可能导致内存泄漏。通过分析内存占用数据，开发者可以定位到具体的代码位置，及时修复问题。
- 优化内存使用：了解页面内存占用情况有助于开发者优化代码，减少不必要的内存消耗。例如，在处理大型数据集合时，如表格数据或图形数据，合理使用数据结构和算法可以降低内存占用。开发者可以通过查看内存占用情况，评估不同数据处理方式对内存的影响，选择更优的方案。此外，对于不再使用的对象和变量，及时将其设置为 null，以便垃圾回收机制能够及时回收内存，也是优化内存使用的重要手段。
- 辅助资源管理：在开发过程中，前端开发者需要管理各种资源，如图像、脚本、样式表等。通过了解页面内存占用情况，可以更好地评估资源的使用效率。例如，对于大型图像资源，可以考虑进行压缩或使用懒加载技术，以减少内存占用。同时，合理管理脚本和样式表的加载顺序和时机，也可以避免不必要的内存消耗。