必须先启用Safari开发者菜单才能打开网络检查器:Safari→设置→高级→勾选“在菜单栏中显示‘开发’菜单”,再按Option+Command+I打开检查器并切换至网络标签页,刷新页面后通过Timing子标签查看DNS、TCP、SSL、TTFB及下载等分段耗时,点击“持续时间”列降序排列识别超300ms的慢资源。

你想知道某个网页里图片为什么加载慢、接口为什么卡住,就得打开 Safari 的网络检查器,逐条看每个请求从 DNS 查询到下载完成的每一段耗时——这不是看总时间,而是拆开看哪一环拖了后腿。
启用开发者菜单并打开网络检查器
没有这一步,后面所有面板都打不开。Safari 默认隐藏“开发”菜单,必须手动激活。
点击顶部菜单栏的 Safari → 设置 → 高级 → 勾选【在菜单栏中显示“开发”菜单】。
关闭设置窗口,确认菜单栏出现“开发”项;如果没出现,重启 Safari 再试一次。
打开目标网页后,按 Option + Command + I 快速唤出 Web 检查器,再点击顶部“网络”标签页。
捕获并筛选关键请求
刚打开网络面板时是空的,必须刷新页面才能抓到真实请求流。
点击面板左上角红色圆形录制按钮(若为灰色则先点一下启动),然后按 Command + R 刷新当前页面。
等底部状态栏显示“已完成”,且无旋转加载图标,说明本次加载已全部结束。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
在网络列表上方搜索框输入关键词(如 api/v1/login 或 .jpg),可快速定位目标请求;也可点击“类型”列标题两次,让“XHR”请求排到最前面。
查看单个请求的分段耗时
点击任意一条请求,在右侧自动展开详情面板,切换到“Timing”子标签页。
这里显示的是真实链路耗时分解:DNS 解析 → TCP 连接 → SSL 协商 → 等待首字节(TTFB)→ 内容下载。每一项单位都是毫秒,不是估算值。
【TTFB 超过 500ms 就说明后端响应慢或网络路由有问题,不是前端能优化的】
若某项显示为“(blocked)”,代表被浏览器排队或受同源策略限制;若某项长时间空白,可能是该阶段未触发(比如 HTTP/2 下 DNS 和连接可能合并)。
排序识别慢资源
直接点击表头“持续时间”两次,列表会按耗时从高到低排列。
重点关注持续时间 > 300ms 的资源,尤其是 HTML、JS、CSS 这三类——它们阻塞渲染,哪怕只慢 200ms,用户也可能感知明显卡顿。
右键点击任一请求 → 选择“在新标签页中打开”,可单独测试该资源是否真慢,排除页面逻辑干扰。

















