一、基础性能检测
1. 打开开发者工具：按 `Ctrl+Shift+I`（Mac用 `Cmd+Opt+I`）→ 切换到“Network”面板 → 刷新页面查看资源加载情况。
2. 识别慢速请求：在“Network”面板按“时间”排序 → 标记延迟超过500ms的请求 → 检查是DNS解析、TCP连接还是SSL握手问题。
3. 分析主线程活动：切换到“Performance”面板 → 录制页面操作 → 查看“Tasks”列表中的长任务 → 定位阻塞脚本。
二、网络请求优化
1. 合并小文件：在“Network”面板筛选CSS/JS文件 → 检查是否可合并压缩 → 减少HTTP请求次数。
2. 启用缓存：在“Headers”标签查看响应头 → 确保静态资源有`Cache-Control`或`Expires`设置 → 避免重复加载。
3. 优化图片加载：在“Network”面板过滤图片资源 → 检查是否开启懒加载（`loading="lazy"`） → 替换高分辨率图片为WebP格式。
三、JavaScript性能提升
1. 排查阻塞脚本：在“Performance”面板的“Scripting”部分 → 找到执行时间超过100ms的JS文件 → 进行代码拆分或异步加载。
2. 减少DOM操作：在“Elements”面板观察页面结构 → 避免频繁修改节点属性 → 使用虚拟DOM技术优化重绘。
3. 内存泄漏检测：在“Memory”面板录制堆快照 → 对比前后堆内存变化 → 清理未释放的全局变量。
四、渲染性能优化
1. 检查重绘次数：在“Performance”面板查看“Paint”事件 → 定位频繁触发重绘的动画效果 → 改用CSS动画替代JS实现。
2. 优化CSS选择器：在“Styles”面板展开复杂选择器 → 简化层级关系 → 避免使用高成本的后代选择器。
3. 启用硬件加速：在开发者工具设置中强制开启“GPU渲染” → 检查是否有Canvas/WebGL内容未利用硬件加速。
五、移动端专项优化
1. 模拟弱网环境：在“Network”面板设置网络速度为“Slow 3G” → 测试页面核心功能加载时间 → 优先加载首屏内容。
2. 减少Touch事件：在“Event Listeners”面板统计触摸事件 → 合并高频触发的`touchstart`/`touchmove`处理 → 降低事件回调频率。
3. 优化字体加载：在“Network”面板检查Web字体请求 → 使用`font-display: swap`属性 → 防止字体加载前出现空白期。