Firefox DevTools评估页面性能需结合Network、Performance、Recorder、Memory和Storage面板：Network看资源加载时序与首屏瓶颈，Performance查JS渲染卡顿，Recorder量化用户操作流程，Memory/Storage识别长期内存泄漏与缓存问题。
Network 面板：看资源加载是否拖后腿
打开方式：Ctrl+Shift+E（Windows） 或 Cmd+Option+E（macOS），或通过菜单 → Web Developer → Network。
它列出所有请求（HTML、JS、CSS、图片、API），关键看三件事：
- 时间轴列（Timeline）：每行显示资源从发起请求到完成的全过程，包括排队、DNS、连接、SSL、发送、等待、接收等阶段；宽条代表耗时长，一眼识别慢请求
- DOMContentLoaded 和 Load 时间线标记：蓝色竖线是 DOM 就绪时间，紫色竖线是整个页面加载完成时间；若两者间隔大，说明 JS/CSS 阻塞了渲染
- 禁用缓存测试首屏：在 Settings（齿轮图标）中勾选 Disable HTTP Cache，模拟用户首次访问，避免缓存掩盖真实加载问题
Performance 面板：查 JavaScript 和渲染是否卡顿
打开方式：Shift+F5，或菜单 → Web Developer → Performance。
点击 Start Recording，执行典型操作（如滚动、点击、表单提交），再停止录制，会生成完整时间线：
- FPS 图表：绿色表示帧率健康（≥60fps），红色/黄色提示掉帧，尤其关注交互过程中的持续下跌
- 瀑布图（Waterfall）：展示主线程任务调度，识别长任务（>50ms）——它们会阻塞响应，造成卡顿
- JS 火焰图（Flame Chart）：函数调用堆叠清晰可见；越宽的块越耗时，向上追溯可定位具体方法（比如某个计算密集型 watch 或 computed）
- 内存分配采样：勾选 Memory 选项后，可看到 GC 触发频率和内存增长趋势，辅助判断是否存在泄漏
Recorder 工具：复现并量化用户真实操作
适合验证优化效果，尤其对交互密集型页面（如表格筛选、搜索联想）：
- 在 DevTools 中打开 Recorder 面板（若不可见，点“更多工具”→ Recorder）
- 录制一段典型用户流（例如：输入关键词 → 点击搜索 → 滚动结果列表）
- 重播时勾选 Measure performance，自动采集该流程下的 FPS、内存、网络请求等指标
- 对比优化前后的录制报告，能直观看出 LCP、FID、CLS 等 Core Web Vitals 的变化
Memory 和 Storage 面板：补全长期性能视角
很多性能退化不是单次加载问题，而是随使用时间累积导致：
- Memory 面板：拍快照（Take Snapshot）对比，查看对象数量增长是否异常；重点关注 WebAssembly.Memory、Detached DOM trees 和重复创建的闭包
- Storage 面板：检查 localStorage/sessionStorage 大小、IndexedDB 使用量、缓存策略（如 Service Worker 缓存是否命中率低），过大或失效缓存会间接拖慢加载
