Firefox DevTools 通过Network、Performance、Memory和Storage面板及about:config配置，帮助定位加载慢、渲染卡顿、内存泄漏和缓存不当等问题。Network揪出慢请求，Performance分析主线程阻塞，Memory检测泄漏，Storage与about:config优化缓存策略。
Firefox DevTools 本身不直接“优化”资源加载，而是帮你精准定位拖慢页面的原因，再配合代码或配置调整来提速。关键在于用对工具、看懂指标、快速验证。
Network 面板：揪出加载慢的源头
这是诊断资源加载问题的第一站。打开方式：Ctrl+Shift+E（Windows）或 Cmd+Option+E（macOS），或通过菜单「开发者工具 → 网络」进入。
- 禁用缓存再刷新：勾选面板顶部的 Disable Cache，确保看到的是真实首次加载表现，不是缓存干扰的结果
- 关注瀑布图中的“长条”和“空档”：横向跨度大、起始时间晚、浅色部分（等待）占比高的请求最可疑
- 点开可疑请求看详情：重点关注 Blocked（排队）、DNS Lookup（域名解析）、Connect（建连）、SSL（加密握手）、Response（响应下载）各阶段耗时
- 按大小排序：点击 Size 列，快速发现未压缩的大 JS/CSS/图片，它们往往是首屏瓶颈
Performance 面板：看清渲染与脚本影响
按 Shift+F5 打开，它能告诉你资源加载后，浏览器做了什么、卡在哪里。
- 录制一次典型操作：比如打开页面、滚动、点击按钮，然后停止录制
- 看 FPS 曲线：持续低于 60fps 的区域，说明渲染吃力，可能被长任务阻塞
- 查主线程火焰图：展开 “Main” 轨道，找持续 >16ms 的黄色/红色长条——这是 JavaScript 执行太久，会阻塞渲染
- 留意“Idle”间隙是否充足：如果主线程几乎没空闲，说明脚本太重或调度不合理
Memory 面板：排除内存泄漏拖累
内存占用过高会导致频繁垃圾回收（GC），引发明显卡顿。打开方式同 Performance，或在地址栏输入 about:memory 查全局占用。
- 做对比快照：先点“拍摄快照”，执行操作（如打开关闭标签页），再拍一次，对比差异
- 重点看 JS 堆内存增长：如果关闭页面后内存没回落，可能存在 DOM 或事件监听器泄漏
- 结合 about:processes：在地址栏输入该地址，可看到每个标签页、扩展的实际内存消耗，快速锁定“吃内存大户”
Storage 面板 + about:config：调优缓存策略
缓存配置不当会让浏览器反复拉取资源，或把不该缓存的内容硬塞进内存。
- Storage 面板查看现状：直观看到 Cookies、Cache API、Service Worker 缓存、IndexedDB 占用情况，确认是否缓存了大量过期或无效资源
- 调整内存缓存容量：在 about:config 中搜索 browser.cache.memory.capacity，设为 131072（即 128MB），避免默认值过小导致频繁换页
- 禁用磁盘缓存（可选）：设 browser.cache.disk.enable = false，强制走更快的内存缓存，适合 SSD 电脑
-
启用预连接：在网页
<head>中添加<link rel="preconnect" href="https://cdn.example.com">，减少后续请求的 DNS 和 TLS 开销
