1. 打开开发者工具与性能面板
- 按`F12`或右键点击页面→选择“检查”→切换到“Performance”标签页→准备录制性能数据（适合测试首页加载速度）。
- 在性能面板→点击“录制”按钮→刷新页面→生成详细报告（需重复操作多次取平均值）。
2. 查看关键性能指标
- 在报告页→找到“First Contentful Paint”（首屏渲染时间）→数值越低表示加载越快（理想值小于1.5秒）。
- 检查“Time to Interactive”（可交互时间）→确保用户能快速操作页面（如点击按钮无延迟）。
3. 分析资源加载与耗时
- 展开“Resources”列表→查看各类文件加载时间→排序找出最慢资源（如未压缩的图片或过大的JS文件）。
- 在“Waterfall”图表→拖动时间线对比资源顺序→识别阻塞渲染的请求（如CSS文件后置导致白屏）。
4. 检测长任务与脚本执行
- 在“Main”线程→查看红色长条任务→标记超过50ms的脚本（如复杂的动画函数需优化）。
- 使用“Coverage”工具→勾选“Show Instrumentation Coverage”→删除未使用的JS代码（减少文件体积）。
5. 模拟网络环境与设备测试
- 在性能面板→选择“Online”或“Fast 3G”→模拟不同网速下的表现（如移动端加载测试）。
- 切换到“Mobile”工具栏→调整屏幕尺寸→检查响应式设计是否影响性能（如图片未按需加载）。
6. 捕获内存泄漏与异常
- 在“Memory”标签页→多次点击“Heap snapshot”→对比内存占用变化→找出持续增长的对象（如未清理的全局变量）。
- 在“Console”面板→过滤“Error”日志→修复报错代码（如第三方插件冲突提示）。
7. 应用优化建议与复测
- 根据报告中的“Suggestions”提示→启用压缩或懒加载→保存修改后再次测试（如开启图片延迟加载）。
- 在Network面板→强制刷新缓存（按`Ctrl+F5`）→验证优化效果是否生效（对比前后数据差异）。
