Chrome中量化网页加载表现需用开发者工具三大面板：Network获取总请求耗时及DOMContentLoaded/load时间；Performance记录FP/FCP/LCP/TTI等渲染与交互指标；Lighthouse在Slow 4G下输出标准化FP/FCP/LCP/TTFB等指标及阶段分解。
如果您在Chrome浏览器中访问网页时希望量化其加载表现，则需借助内置开发者工具中的多个专业面板进行多维度时间捕获。以下是获取网页加载时间的三种独立且可验证的技术路径：
一、通过Network面板获取整体网络请求耗时
Network面板直接捕获页面生命周期内全部网络资源的请求与响应过程，提供从导航开始到所有资源完成加载的总耗时（Finish），并标定DOMContentLoaded与load两个关键事件节点的时间戳。
1、在Chrome浏览器中打开目标网页。
2、按下F12键，或在页面空白处右键选择“检查”，调出开发者工具。
3、点击顶部标签栏中的Network选项卡，进入网络监控界面。
4、确认左上角圆形录制按钮为红色；若为灰色，单击一次启用捕获。
5、按下Ctrl+R（Windows/Linux）或Cmd+R（macOS）强制刷新页面。
6、待页面完全加载后，在面板底部状态栏查找Finish后显示的毫秒数值，即为全部网络请求完成总耗时。
7、观察时间轴中垂直的蓝色线（DOMContentLoaded）与红色线（load），分别对应DOM构建就绪与所有资源（含图片、脚本、样式表）加载完毕时刻。
二、利用Performance面板记录首屏渲染与交互就绪时间
Performance面板以高精度采样方式录制主线程活动，涵盖渲染帧率、脚本执行、布局计算与绘制阶段，可回溯FP（First Paint）、FCP（First Contentful Paint）、LCP（Largest Contentful Paint）及TTI（Time to Interactive）等关键性能指标的具体毫秒值。
1、打开目标网页后，按F12打开开发者工具。
2、切换至顶部的Performance标签页。
3、勾选Screenshots复选框以捕获每帧截图，勾选Memory以同步记录内存变化趋势。
4、点击左上角灰色圆形按钮开始录制，随后立即按下Ctrl+R（Windows/Linux）或Cmd+R（macOS）刷新页面。
5、待页面完全加载并交互稳定后，再次点击该圆形按钮停止录制。
6、在生成的时间轴报告中，将鼠标悬停于顶部标记如FP、FCP、LCP处，查看对应毫秒数值；向下滚动至Summary区域，定位TTI所在行获取交互就绪时间。
三、使用Lighthouse执行标准化性能审计并提取加载时间分解
Lighthouse模拟真实设备与受限网络环境（如Slow 4G），运行端到端加载流程，输出基于真实行为计算的FP、FCP、LCP、TTFB等指标数值，并提供各阶段耗时占比分解，适用于跨页面横向比对与基线建立。
1、在开发者工具中切换至Lighthouse面板（部分版本显示为“Audits”）。
2、在左侧配置区域，确保勾选Performance审计类别。
3、在“设备”选项中选择Mobile，并在“网络节流”中选择Slow 4G以贴近典型移动场景。
4、勾选左上角的Preserve log复选框，防止页面跳转导致日志丢失。
5、点击“Generate report”按钮启动审计，等待约30–60秒完成。
6、在生成的报告中展开“Metrics”部分，查看First Contentful Paint、Largest Contentful Paint、Time to Interactive三项的实测毫秒值及对应说明。
