可通过浏览器开发者工具的performance或network面板监测网页加载耗时：chrome/edge用performance面板录制分析各阶段时间，firefox用性能分析器查js阻塞，network面板查看总耗时及分段网络延迟，chrome://tracing支持快速录屏式追踪。
如果您希望了解网页在浏览器中加载的具体耗时情况，可以通过内置的开发者工具进行实时监测和分析。以下是使用主流浏览器性能分析工具查看网页加载速度的操作步骤：
一、使用Chrome开发者工具的Performance面板
Chrome浏览器的Performance面板可记录页面加载全过程的时间线，包括网络请求、JavaScript执行、渲染绘制等阶段，帮助定位加载瓶颈。
1、打开目标网页后，按 F12 或右键选择“检查”打开开发者工具。
2、点击顶部标签栏中的 Performance 选项卡。
3、点击左上角的圆形录制按钮（或按 Ctrl+E），随后刷新网页（F5）开始捕获。
4、录制结束后，时间轴将显示完整的加载瀑布图，鼠标悬停可查看各阶段耗时详情。
二、使用Firefox开发者工具的性能分析器
Firefox的性能分析器支持分层采样，能精确识别主线程阻塞与长任务，适用于深度排查JavaScript执行延迟问题。
1、访问网页后，按 Ctrl+Shift+E 打开性能分析器（或通过菜单“工具 > Web开发者 > 性能”进入）。
2、确保“启用JavaScript分析器”选项已勾选。
3、点击 开始录制 按钮，然后刷新页面完成数据采集。
4、停止录制后，在“调用栈”视图中可展开函数调用路径，查看具体耗时函数及其执行次数。
三、使用Edge浏览器的Performance工具
Edge基于Chromium内核，其Performance工具与Chrome高度一致，但默认启用更精细的内存与CPU使用率叠加视图。
1、在目标页面按 F12 打开开发者工具。
2、切换至 Performance 标签页。
3、点击录制按钮，接着按下 Ctrl+R 强制重新加载页面。
4、录制完成后，下方“Summary”区域会自动显示FCP（首次内容绘制）、LCP（最大内容绘制）等关键指标数值。
四、通过Network面板快速查看加载总耗时
Network面板提供最直观的资源加载时间汇总，适合快速判断整体加载延迟是否由网络请求引起。
1、打开开发者工具后，切换到 Network 标签页。
2、勾选 Disable cache（禁用缓存）以模拟首次访问场景。
3、刷新页面，所有请求将按时间顺序列出，底部状态栏显示 Finish 时间即为总加载耗时。
4、点击任一请求，在右侧Headers选项卡中可查看 Timing 子项，细分为DNS查询、TCP连接、SSL握手、响应等待等分段耗时。
五、使用命令行快捷方式快速启动性能记录
在Chrome或Edge中，可通过地址栏输入特定协议指令直接跳转至性能分析界面，省去手动切换标签步骤。
1、在浏览器地址栏中输入 chrome://tracing 并回车（Chrome/Edge适用）。
2、点击 Record 按钮，在弹出窗口中勾选 Web Page 和 Renderer Processes。
3、点击 Start Recording 后立即刷新待测网页。
4、录制约5秒后点击 Stop，系统自动生成交互式时间线报告。
