要精准定位网页加载缓慢根源，需用Firefox Profiler捕获完整链路：快捷键启动→刷新页面→停止录制→配置采样（JS+截图，0.5ms间隔）→三层过滤（FPS曲线、Call Tree自耗时、Marker Chart空白区分析）。
要精准定位网页加载缓慢的根源，比如首屏空白时间过长、资源加载阻塞或JS执行拖累渲染，必须用Firefox性能工具捕获完整加载链路，不能只看Network面板的总耗时。
启动Profiler并开始录制加载过程
按 Ctrl + Shift + E（Windows/Linux）或 Cmd + Option + E（macOS）直接唤起Firefox Profiler——这个快捷键直连底层采样器，比F12再切Performance标签页更可靠，能避免UI初始化延迟导致首帧漏采。
点击右上角“Start recording”按钮，或直接按空格键开始录制；此时页面顶部会出现红色提示条，表示已进入捕获状态。
立即刷新页面（Ctrl + R 或 Cmd + R），确保所有加载行为（DNS查询、TCP连接、HTML解析、JS执行、样式计算、布局、绘制）都被主线程和渲染线程同步记录。
等页面完全加载完成（地址栏停止转圈、控制台无pending请求），再次按空格键停止录制。数据将自动加载进分析视图，无需手动保存。
配置关键采样选项以捕获真实加载行为
点击右上角齿轮图标 → Capture Settings。
务必勾选“JavaScript samples”和“Screenshots”——前者是识别JS执行阻塞的核心依据，后者提供每帧视觉快照，用于确认白屏/闪屏是否由渲染中断引发。
取消勾选“Memory”，因为加载阶段的内存瞬时分配极少构成瓶颈，开启它会显著降低主线程采样密度，导致关键微任务（如requestIdleCallback内逻辑）被漏掉。
在“Sampling interval”中输入 0.5（单位ms），回车确认；默认1ms间隔无法捕获短于1ms的调度抖动，而现代框架的初始化钩子常在此区间内密集触发。
三层过滤法快速定位加载瓶颈
第一步：看时间线下方的FPS曲线，重点观察从页面刷新开始的前3秒。若出现连续红色竖条（vsync missed）或FPS跌破30fps，说明渲染线程被严重抢占，问题大概率出在JS执行或强制同步布局。
第二步：切换到Call Tree → 选择“Top Down”视图 → 按“Self Time”降序排列。找到Self Time最长的顶层函数，不是它的父调用者——例如看到initApp耗时80ms，但其下parseJSON占65ms，真正瓶颈就是JSON解析本身，而非initApp整体逻辑。
第三步：切换到Marker Chart，查找“DOMContentLoaded”蓝线与“Load”紫线之间是否存在大片空白区。若存在，且该区间内Main轨道布满黄色JS块，说明JS执行阻塞了解析；若空白区内出现密集“Recalculate Style”标记，则可能是CSSOM构建被阻塞（如外链CSS未加载完就执行了读取offsetHeight的脚本）。
