firefox devtools通过network monitor和performance工具双路径完成加载性能审计：前者定位网络层瓶颈（如dns、ssl耗时），后者分析主线程执行细节（如js阻塞、重排），结合可覆盖完整加载链路。
Firefox DevTools 提供了两套互补的路径来完成页面加载性能审计：一是用Network Monitor（网络监视器）看资源加载耗时与瓶颈，二是用Performance 工具（性能分析器）查主线程执行细节和关键渲染事件。两者结合，能覆盖从网络层到 JS 执行层的完整加载链路。
用 Network Monitor 查加载总耗时与资源分段延迟
这是最快定位“慢在哪”的入口——比如是 DNS 慢、SSL 握手长，还是某个图片或脚本拖累了整体。
- 打开目标网页后，按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Option+E（macOS）直接进入 Network 面板；也可右键→“检查元素”→顶部切换到 Network 标签
- 勾选 Disable cache（禁用缓存），确保模拟首次访问的真实场景
- 刷新页面，所有请求会按时间顺序列出；底部状态栏显示的 Finish 时间就是总加载耗时
- 点击任一请求 → 右侧 Headers → 展开 Timing，可看到 DNS 查询、TCP 连接、SSL 协商、等待响应、内容下载等各阶段毫秒级耗时
- 留意蓝色竖线（DOMContentLoaded）和紫色竖线（load事件），它们标记了关键生命周期节点，帮助判断 JS/CSS 是否阻塞了解析或渲染
用 Performance 工具录屏式分析主线程行为
Network 告诉你“什么资源慢”，Performance 则告诉你“为什么慢”——比如某段 JS 执行太久卡住了渲染，或 CSS 计算引发大量重排。
- 按 Shift+F5 直接打开 Performance 面板（或通过菜单：工具 → Web 开发者 → 性能）
- 点击左上角圆形录制按钮，然后点击 Refresh page（刷新页面）——DevTools 会自动在刷新时开始记录，并在加载完成后几秒停止
- 录制结束后，时间轴会自动聚焦活动密集区；上方有 FPS、CPU、Net、内存等轨道，重点关注 主线程（Main） 的堆栈图
- 拖选一段高 CPU 占用区域 → 右侧展开 Call Tree 或 Flame Chart，就能看到具体哪个函数调用耗时最长、是否触发了 layout/reflow 或 long task
- 确认是否启用了 Enable JavaScript profiler（在设置中），否则 JS 执行细节将不可见
结合两次加载对比看缓存影响
Firefox 网络监视器内置的性能分析功能可自动做两次加载：一次清空缓存（首屏），一次复用缓存（后续访问），帮你判断优化方向。
- 在 Network 面板中点击工具栏上的 秒表图标（ stopwatch ）
- 它会自动刷新页面两次，并并排展示结果：左侧为无缓存加载，右侧为有缓存加载
- 对比两张饼图和表格，能看出哪些资源类型（JS、CSS、图片）在缓存命中后明显提速，哪些仍依赖网络（如 API 接口）
- 点击饼图某一块（如 “JS”），会自动跳转到对应请求列表并过滤出该类型资源，方便批量分析
关键指标对照与常见问题提示
加载性能不只是看“总时间”，更要关注用户感知的关键节点：
- DOMContentLoaded：HTML 解析完、DOM 构建完成的时间点，理想值 ≤1.0 秒；若远超此值，检查同步 JS 或大型内联脚本
- load 事件：所有资源（含图片、iframe）加载完毕，常被误当作“页面可用”，实际用户可能更早看到内容
- 若 Performance 中出现红色长条（long task >50ms），说明主线程被长时间占用，会导致卡顿、输入延迟；重点排查未拆分的 JS 逻辑或未加防抖的事件监听
- Network 中某请求状态码为 304 或 200 (from memory cache) 是缓存生效的表现；若大量 200 OK 且 size 较大，说明缺少合理缓存策略
