summary区域位于performance面板底部火焰图正下方，是横向滚动、含tasks/ frames/network/memory等图标卡片的统计栏；完成“reload page and record”录制后自动出现，点击标签可展开对应维度摘要，需勾选capture network和memory并使用无痕模式才能完整显示数据。

直接在 Performance 面板底部的 Summary 区域查看，它会自动汇总录制期间的关键执行行为和资源消耗，无需手动计算。

Summary 区域在哪、长什么样

完成一次录制（推荐用“Reload page and record”按钮）并停止后，面板下方会出现横向滚动的 Summary 栏。它默认显示在火焰图正下方，由多个带图标的卡片组成，包括：Tasks、Frames、Memory、Network 等标签页。点击任一标签，即可展开对应维度的统计摘要。

重点关注的几类摘要信息

Tasks 卡片列出主线程上所有任务的耗时分布：

• 显示 Long Tasks 数量及总时长（标红提示阻塞风险）
• 给出脚本执行、渲染、布局、绘制等各阶段占比
• 点击具体任务条，可跳转到火焰图中定位代码位置

Frames 卡片反映渲染稳定性：

• 显示平均 FPS、最低 FPS 及掉帧区间（低于 60fps 的段落会标黄或红）
• 标注哪些帧因 JS 执行过长或样式强制重排而变慢

Network 卡片汇总资源加载概况（需提前勾选 Capture network）：

• 列出总请求数、传输字节数、加载总时长
• 标出最慢资源、TTFB 最高请求、未压缩文件等异常项

Memory 卡片（需勾选 Memory 复选框）呈现内存趋势：

• 显示 JS Heap 峰值与最终占用量
• 若曲线持续上升且无回落，提示潜在内存泄漏

怎么让 Summary 更有用

Summary 不是静态快照，它的数据依赖录制设置：

• 必须在无痕窗口中操作，避免插件干扰真实数据
• 录制前点齿轮图标，勾选 Capture network 和 Memory，否则对应卡片为空
• 使用 Reload page and record 模式，才能捕获完整生命周期，Summary 中的 FP/FCP/LCP 等时间点才准确
• 弱网或降速测试时，同步调整 Network 和 CPU Throttling 设置，Summary 会如实反映降级后的资源与任务分布