Chrome提供五种量化网页加载耗时的方法：一、Network面板查看Finish值及DOMContentLoaded/load时间点；二、Performance面板录制分析渲染全流程；三、Lighthouse生成性能评分与优化建议；四、Network Timing标签页定位请求各阶段瓶颈；五、Console执行Navigation Timing API获取高精度时间戳。
如果您希望量化网页从请求发出到完全呈现的耗时表现，Chrome浏览器提供了多维度、可复现的内置测速与分析能力。以下是具体操作步骤：
一、通过Network面板获取整体加载耗时
Network面板直接记录所有网络请求的时间线，可精确读取页面完成加载的总时间及关键事件节点。该方法适用于快速验证首屏加载速度和资源阻塞情况。
1、在Chrome中打开目标网页。
2、按下F12或右键空白处选择“检查”，调出开发者工具。
3、点击顶部标签栏中的Network选项卡。
4、勾选左上角的Preserve log复选框，防止跳转丢失日志。
5、按F5刷新页面，等待所有请求完成。
6、查看面板底部状态栏中的Finish值，即全部网络请求结束的总毫秒数。
7、观察时间轴中的蓝色垂直线（DOMContentLoaded）与红色垂直线（load），分别对应DOM构建完成与所有资源加载完毕的时间点。
二、使用Performance面板录制并解析完整渲染流程
Performance面板捕获CPU执行、渲染帧率、内存分配等底层行为，能定位脚本阻塞、重绘重排、长任务等导致加载感知变慢的根本原因。
1、确保开发者工具已打开，并切换至Performance选项卡。
2、确认顶部控制区已勾选Screenshots（截图）、Memory（内存）和Network（网络请求）复选框。
3、点击左上角的灰色圆形录制按钮开始记录。
4、立即按F5刷新页面，或执行需分析的用户交互动作。
5、待页面稳定后，再次点击圆形按钮停止录制。
6、等待分析完成，在时间轴中查看蓝色（Loading）、黄色（Scripting）、紫色（Rendering）、绿色（Painting）四类颜色区块分布。
7、将鼠标悬停于高亮长条上，查看具体函数名、耗时（Duration）及调用栈路径。
三、借助Lighthouse生成结构化性能评分与优化建议
Lighthouse以自动化方式模拟真实设备与网络环境，输出0–100分的性能得分及可落地的改进建议，适合横向对比与验收测试。
1、在开发者工具中切换至Lighthouse选项卡（部分版本显示为“Audits”）。
2、在左侧配置区域，勾选Performance类别。
3、在“设备”选项中选择Mobile，并在“网络节流”中选择Slow 4G以贴近典型移动场景。
4、点击Generate report按钮，工具将自动重新加载页面并运行审计。
5、报告生成后，重点关注First Contentful Paint（FCP）、Largest Contentful Paint（LCP）与Time to Interactive（TTI）三项核心指标数值。
6、展开“Opportunities”和“Diagnostics”部分，逐条查看如“Eliminate render-blocking resources”、“Properly size images”等具体优化项。
四、利用Network面板Timing标签页精确定位延迟环节
单个资源的Timing视图可拆解HTTP请求全生命周期各阶段耗时，帮助区分是DNS、连接、TTFB还是接收阶段造成瓶颈。
1、在Network面板中刷新页面，找到一个关键资源（如主HTML文档或首屏JS）。
2、点击该项，在下方详情区切换到Timing标签页。
3、观察时间轴中各色段落：灰色（Queuing）、浅蓝（Stalled）、深蓝（DNS Lookup）、橙色（Initial Connection）、紫红（SSL）、深绿（Request Sent）、浅绿（Waiting (TTFB)）、蓝色（Content Download）。
4、若Waiting (TTFB)占比过高，说明服务器响应缓慢；若Content Download过长，则可能因资源体积过大或带宽受限。
5、右键任意资源行，选择Copy → Copy timing，可导出JSON格式的完整时序数据用于进一步分析。
五、通过Console执行Navigation Timing API获取高精度时间戳
Navigation Timing API由浏览器原生支持，提供毫秒级精度的页面导航与加载时间数据，适用于自定义监控或自动化脚本集成。
1、打开开发者工具，切换至Console选项卡。
2、输入并执行：performance.getEntriesByType('navigation')[0]，回车后返回当前页面导航全过程时间对象。
3、查看其中domContentLoadedEventEnd与loadEventEnd字段，分别对应DOMContentLoaded与load事件完成时刻（相对于页面开始加载的毫秒偏移）。
4、计算首屏关键时间：执行performance.getEntriesByName('first-contentful-paint')[0].startTime，获取FCP时间戳。
5、如需持续监听，可运行：performance.setResourceTimingBufferSize(500)扩大缓冲区，并结合performance.onresourcetimingbufferfull事件捕获完整资源链。
