首先使用 Chrome 开发者工具的 Performance 面板录制页面性能，分析帧率与主线程活动；再通过 Network 面板查看资源加载耗时，定位慢请求；最后利用 Lighthouse 生成综合性能评分，获取优化建议。
如果您在浏览网页时遇到加载缓慢或卡顿的问题，可以通过 Chrome 浏览器内置的开发者工具来获取详细的性能报告，从而定位瓶颈所在。这些工具能够记录页面加载和用户交互过程中的各项指标。
本文运行环境：MacBook Pro，macOS Sonoma
一、使用 Performance 面板录制完整性能报告
Performance 面板可以记录页面加载或用户操作期间的详细性能数据，包括帧率、脚本执行、渲染和内存使用情况，帮助全面分析性能问题。
1、按下 Command+Shift+N 打开 Chrome 的无痕窗口，避免扩展程序干扰测试结果。
2、在目标网页上按下 F12 或右键选择“检查”以打开开发者工具。
3、切换到 Performance 选项卡。
4、点击左上角的圆形录制按钮开始记录，然后刷新页面或进行交互操作。
5、操作完成后点击停止按钮，等待 Chrome 生成性能报告。
6、在报告中查看 FPS（帧率）、CPU 使用情况、网络请求和主线程活动等图表，识别性能瓶颈。
二、通过 Network 面板分析资源加载时间
Network 面板专注于网络请求的详细信息，可查看每个资源的下载耗时、大小和状态，是优化首屏加载速度的关键工具。
1、在打开开发者工具后，切换到 Network 选项卡。
2、刷新页面，观察所有资源的加载顺序和耗时条。
3、点击任意资源条目，在下方的 Timing 标签页中查看完整的请求生命周期，包括 Queueing、Stalled、DNS Lookup、Initial Connection、TTFB 和 Content Download 等阶段。
4、利用过滤功能，按类型（如 Img、JS、CSS）筛选资源，快速识别加载最慢的文件。
5、关注 DOMContentLoaded 和 Load 时间标记，判断 DOM 构建和资源加载完成的时间点。
三、利用 Lighthouse 生成综合性能评分
Lighthouse 是一个自动化审计工具，可对网页的性能、可访问性、SEO 等方面进行评估，并提供具体的优化建议。
1、在开发者工具中切换到 Lighthouse 选项卡。
2、确保设备类型设置为“Desktop”或“Mobile”，根据测试需求选择。
3、勾选“Performance”审计类别，也可同时选择其他类别进行综合评估。
4、点击“Generate report”按钮，Chrome 将自动加载页面并运行审计。
5、等待生成报告，查看性能总分及针对 First Contentful Paint、Speed Index、Time to Interactive 等核心指标的详细分析。
