Chrome浏览器如何查看资源加载时间 F12开发者工具Network分析【性能】
如果 无论兄弟们需要了解网页中各类资源（如图片、脚本、样式表）的加载耗时，Chrome浏览器内置的开发者工具提供了直观的Network面板用于实时捕获和分析网络请求 时刻。 下面内容是具体操作步骤：
一、打开开发者工具并切换到Network面板
该步骤是启动资源加载 时刻分析的前提，确保Network面板处于激活 情形，以便捕获后续页面加载 经过中的全部网络请求。
1、在Chrome浏览器中打开目标网页。
2、按下 F12 键，或右键页面任意空白处选择“检查”，调出开发者工具。
3、点击顶部标签栏中的 Network 选项卡，进入网络请求监控界面。
二、启用网络记录并刷新页面
Network面板默认可能未开启实时捕获，需手动确保记录已启用，并通过刷新触发完整加载流程，从而获取准确的资源 时刻数据。
1、确认左上角的圆形录制按钮显示为 红色，表示记录已开启；若为灰色，点击一次启动捕获。
2、按下 Ctrl + R（Windows/Linux）或 Cmd + R（ cOS）强制刷新当前页面。
3、等待页面完全加载完毕，Network列表将自动填充所有已加载资源及其 时刻信息。
三、查看单个资源的详细加载 时刻
每个资源行右侧的 时刻列仅显示总耗时，而更精细的 时刻分解（如DNS查询、TCP连接、SSL握手、请求发送、内容下载等）需通过瀑布图与Timing标签查看。
1、在Network列表中点击任一资源条目（例如 in.js 或 logo.png）。
2、在下方面板中切换至 Timing 子标签页。
3、观察瀑布图中各颜 块对应的 时刻阶段，鼠标悬停可显示精确毫秒值。
四、启用 高 质量 时刻指标列
默认视图仅显示“Time”总列，但可通过自定义列展示DNS、Connection、SSL、Request、Response等细分耗时，便于定位瓶颈环节。
1、在Network表格头部右键任意列名（如“Name”或“Size”）。
2、在弹出菜单中勾选 DNS Lookup、Connection Start、SSL Setup、Request Sent、Waiting (TTFB)、Content Download 等选项。
3、各资源对应行将显示上述细分 时刻数值，单位为毫秒。
五、筛选与排序资源以聚焦关键耗时项
当资源数量较多时，可通过排序和筛选快速识别加载最慢的资源，辅助性能 难题定位。
1、点击表格头部的 Wate ll 列 深入了解，按加载耗时从长到短排序。
2、使用左上角过滤框输入扩展名（如 .jpg、.js）或关键词（如 api）缩小资源范围。
3、勾选上方过滤栏中的 Largest first 可按资源体积降序排列，结合 时刻分析大体积资源的影响。