1. 使用内置分析工具
- 打开开发者工具：按`Ctrl+Shift+I`（Windows）或`Cmd+Opt+I`（macOS）→点击“Performance”面板→录制页面加载过程（点击“开始记录”后刷新页面）。
- 查看关键指标：在报告中找到“FPS”（帧率）和“CPU使用率”→拖动时间轴对比操作与性能波动→标记卡顿位置（如图片加载时帧率骤降）。
2. 捕获网络请求细节
- 切换到“Network”面板→按`F5`刷新页面→查看所有资源加载时间→排序“Duration”列找出耗时最长的请求（如未压缩的图片或JS文件）。
- 检查资源类型：点击具体请求→在“Headers”标签页查看是否启用压缩（如`gzip`）→在“Timing”标签页分析DNS查询、TCP连接等耗时步骤。
3. 识别渲染阻塞问题
- 观察“Elements”面板→展开HTML标签查看内联JS/CSS→若脚本未放在body前→可能导致页面渲染延迟（需调整代码位置）。
- 使用“Lighthouse”审计：在开发者工具中点击“Lighthouse”→生成报告→查看“Performance”评分→根据建议优化图片大小、减少主线程任务。
4. 模拟弱网环境测试
- 在“Network”面板启用“Throttle”→选择“Slow 3G”或自定义带宽→刷新页面观察加载速度→检查资源是否按需加载（如懒加载图片）。
- 复现移动端性能：在“Toggle device toolbar”中选择手机型号→模拟触摸操作→查看是否有脚本错误或内存泄漏（通过“Memory”面板抓取快照）。
5. 自动化检测与修复
- 安装PageSpeed Insights扩展：在Chrome商店搜索并添加→输入网页URL→自动生成优化建议（如合并CSS文件、开启浏览器缓存）。
- 使用Web Vitals API：在控制台输入`await cv.getEntries()`→获取布局偏移量（CLPO）和首次输入延迟（FID）→定位影响用户体验的具体代码段。
