要定位网页加载慢的根因，最直接的做法是打开Chrome开发者工具的Network面板。捕获真实请求，并查看带时间细分的瀑布图。

通过瀑布图，你能快速找到答案：某个资源到底是DNS解析太慢、SSL握手耗时过长，还是服务器响应迟缓、资源下载卡顿——这些信息都能在这里找到。

注意：必须在页面刷新前完成这一操作，否则初始HTML和关键资源请求不会被捕获。

具体操作步骤如下：

• 在Chrome中打开目标网页，按 Command+Option+I（Mac）或 Control+Shift+I（Windows/Linux）调出开发者工具。
• 点击顶部标签栏的 Network 选项卡。
• 确认左上角圆形录制按钮为红色。如果显示灰色，手动点击一次启用实时捕获。

打开Network面板并启动网络记录

只有重新加载页面，Network面板才能记录完整链路——从HTML解析开始，到所有资源请求完成。

操作很简单：按下 Cmd+R（Mac）或 Ctrl+R（Windows/Linux）强制刷新页面。耐心等待页面完全静止，即Network列表不再新增请求，底部状态栏显示“Finished”。此时所有资源已按时间顺序排列在表格中。

需要提醒的是：不要在页面加载完后再打开Network面板。那样只能看到后续的XHR请求或图片懒加载，首屏核心资源的完整瀑布流根本看不到。

查看单个请求的详细瀑布图

总耗时列（Time）只告诉你“一共花了多久”。要真正诊断瓶颈，得看Timing子面板里的颜色分段。

在Network列表中点击任一资源（比如 index.html、app.js 或 banner.jpg）。在下方面板中切换到 Timing 标签页，观察右侧横向瀑布图：

• 浅灰色代表Queueing/Stalled
• 橙色代表Initial connection
• 绿色代表Waiting/TTFB
• 蓝色则是Content Download

鼠标悬停在任意颜色区块上，会显示精确到毫秒的阶段耗时。注意：紫色竖线标记脚本动态加载资源的起始点，它右边的资源通常受JS执行顺序影响。

启用细分时间列快速筛查问题

有两种方法可以快速展开细分时间列。

方法一：右键点击Network表格任意列头（如Name或Size），在弹出的菜单中勾选 DNS Lookup、Connection Start、SSL Setup、Waiting (TTFB)、Content Download。

方法二：点击Network面板右上角的三个点，选择 Columns，同样勾选上述字段。

表格会立即新增对应列，各资源在不同阶段的耗时差异一目了然。举个例子：某个JS文件的TTFB高达1200ms，但DNS仅需4ms——问题显然不在域名解析，而在后端响应慢。

按瀑布图排序找出最慢资源

先确保Network面板顶部的 Waterfall 下拉菜单已展开。点击 Waterfall，选择 Duration（总耗时）或 TTFB（等待首字节时间）。列表会按所选指标从长到短自动重排，排在最前面的几行，就是拖慢整体加载的关键瓶颈资源。

接下来，逐个点击这些资源的Timing瀑布图，对照颜色区块确认问题所在——是连接建立慢、服务端处理慢，还是文件太大导致下载耗时长。

《夸克》非常好用的免费AI浏览器

下载APP查看