必须启用performance面板并完成一次有效录制才能精准测量网页从打开到完全可交互的全过程耗时，它捕获主线程执行、渲染帧率等底层行为，而非仅看网络请求完成时间。
要在谷歌浏览器中精准测量网页从打开到完全可交互的全过程耗时，必须启用Performance面板并完成一次有效录制——它能捕获主线程执行、渲染帧率、内存变化等底层行为，而非仅看网络请求完成时间。
打开开发者工具并进入Performance面板
按下 F12 或在页面空白处右键选择“检查”，直接唤出开发者工具；若工具已打开，确认顶部标签栏中当前选中的是 Performance 选项卡。
这一步不能跳过Network或Console面板——Performance是唯一能同步记录FP、FCP、LCP及长任务（Long Task）的原生入口。
配置录制前的关键设置
勾选左上角的 Screenshots 复选框，否则无法看到首屏渲染过程中的帧截图；可选勾选 Memory，用于后续排查内存泄漏。
【务必关闭缓存】 点击右上角齿轮图标→勾选 Disable cache，否则重复测试时浏览器可能复用本地缓存资源，导致Load时间虚低、LCP指标失真。
不启用Screenshots就等于放弃视觉验证——你将无法判断“页面看起来是否真的加载完成了”。
开始录制并触发页面加载
方法一：点击左上角灰色圆形录制按钮 → 立即按 F5 刷新页面 → 待页面完全静止后再次点击该按钮停止。
方法二（更推荐）：点击录制按钮旁的 Reload 图标（带循环箭头的刷新按钮），它会在刷新瞬间自动启动录制，确保捕获从导航开始的完整生命周期。
方法三：使用快捷键 Ctrl+Shift+E（Windows/Linux）或 Cmd+Shift+E（Mac）一键开启录制，随后手动刷新——适合需要精确控制操作节奏的调试场景。
查看并定位关键耗时节点
步骤一：等待分析完成，在时间轴顶部找到蓝色标记 FP（First Paint）、绿色标记 FCP（First Contentful Paint） 和最大矩形块上方的 LCP（Largest Contentful Paint），鼠标悬停即可显示毫秒值。
步骤二：向下滚动至 Main 区域，观察黄色条形（Scripting）是否出现持续超过50ms的宽幅区块——这类长任务会阻塞主线程，直接导致输入延迟升高、动画掉帧。
步骤三：将鼠标移至某段高亮黄色条上，底部 Details 面板会显示函数名、Duration与调用栈；双击该条目，切换到 Bottom-Up 标签页，按“Total Time”排序，排第一的函数就是本次加载中最耗时的JS执行点。
