1. 启动性能面板：按`Ctrl+Shift+I`（Windows）或`Cmd+Opt+I`（Mac）打开开发者工具，点击“Performance”标签。在左上角选择“录制”按钮，输入目标网站地址并执行关键操作（如页面滚动、表单提交），完成后点击“停止”生成报告。
2. 查看关键指标：在报告摘要中，重点观察“加载时间”、“交互响应时间”和“页面可交互时间”。若“首次内容渲染（FCP）”超过3秒，说明资源加载过慢；若“交互延迟”频繁出现长时段空白，可能存在脚本阻塞问题。
3. 分析资源加载：展开“资源（Resources）”图表，按类型（JS/CSS/图片）排序加载时间。右键点击加载过慢的文件，选择“显示阻塞原因”，可查看是否因未加`async`/`defer`属性导致JS文件阻塞渲染。
4. 检测内存泄漏：切换到“Memory”标签，点击“录制堆快照”。模拟用户操作（如反复打开关闭弹窗），对比不同时间点的堆内存占用。若数值持续增长且无法释放，可能是全局变量未清理或事件监听器残留。
5. 优化渲染性能：在“Rendering”标签页中，启用“强制重绘（Force Reflow）”观察页面布局变化。使用“Layers”视图检查元素是否过度分层（如非必要元素触发新层创建），减少DOM节点数量可提升绘制效率。
6. 追踪网络请求：返回“Network”标签，过滤“Doc”和“XHR”请求，检查接口响应时间。右键点击延迟请求，选择“Block Request Domain”可模拟服务端故障，测试页面容错处理能力。
7. 模拟弱网环境：在“Network”面板启用“节流带宽（Throttle Connection)”，设置为3G或自定义低带宽。观察页面在限速条件下的加载顺序，优先加载的link rel="preload"资源会提前请求。
