一、基础性能工具使用
1. 打开开发者工具：按 `Ctrl+Shift+I`（Mac用 `Cmd+Option+I`）→ 进入“Performance”面板 → 显示实时性能数据。
2. 录制页面加载：点击“开始录制”按钮 → 刷新网页 → 生成性能报告 → 包含加载时间/脚本执行/绘制周期等关键指标。
3. 分析关键图表：查看“FPS（帧率）”和“CPU使用率”曲线 → 识别卡顿或高消耗的代码段 → 优化动画和计算逻辑。
二、高级性能审计
1. 运行Lighthouse测试：在“Audits”面板点击“生成报告” → 自动检测性能/SEO/访问性等问题 → 获得优化分数和建议。
2. 解读核心指标：关注“首次内容绘制”（FCP）和“速度指数” → 对比行业标杆值 → 调整资源加载顺序。
3. 修复机会提示：根据报告中的“Opportunities”部分 → 启用图片懒加载/减少主线程任务 → 快速提升性能分数。
三、网络请求优化
1. 监控资源加载：切换到“Network”面板 → 按类型筛选请求 → 检查是否有未压缩的文件或重复加载的资源。
2. 设置请求封堵：右键点击特定资源选择“Block Request” → 模拟禁用后观察页面变化 → 判断是否为关键渲染路径。
3. 分析缓存策略：查看HTTP头信息中的Cache-Control字段 → 调整静态资源的缓存时间 → 减少重复网络请求。
四、内存泄漏检测
1. 快照对比分析：在“Memory”面板点击“Take snapshot” → 执行页面操作后再次快照 → 对比堆内存变化 → 发现未释放对象。
2. 追踪垃圾回收：强制触发JavaScript垃圾回收（Heap snapshot功能） → 检查残留的全局变量 → 清理冗余引用。
3. 监控长时任务：在“Task Manager”中查看标签页内存占用 → 结束泄漏进程 → 避免浏览器崩溃。
五、渲染性能调试
1. 强制重绘标记：在“Rendering”面板开启“Repaint Flashing” → 可视化页面重绘区域 → 优化CSS动画性能。
2. 检查合成层：使用“Layer borders”功能 → 查看元素是否被提升为独立合成层 → 减少DOM树重绘开销。
3. 调整字体加载：在“Fonts”面板禁用Web字体的早期加载 → 优先渲染可见文本 → 加速首屏显示。
六、移动端专项优化
1. 模拟弱网环境：在“Network conditions”中选择“Slow 3G” → 测试不同网速下的加载情况 → 优化图片质量与文件大小。
2. 分析启动性能：记录页面从点击到显示的时间 → 拆分为DNS查询/TCP连接/SSL握手等阶段 → 针对性优化瓶颈。
3. 电池消耗监测：通过“Power”面板查看设备电量变化 → 调整动画频率和后台任务 → 延长移动设备续航。