WHAT - 前端性能指标（网络相关指标）

在 WHAT - 前端性能指标 中我们简单介绍了几类前端性能指标。今天我们主要介绍第三类指标。

第三类 “网络相关指标” 是 Web 性能的“上游”环节，直接影响 TTFB、FCP、TTI 等下游加载体验。

这些指标通常通过浏览器的 Performance API（尤其是 PerformanceResourceTiming 和 PerformanceNavigationTiming）即可精确采集，开发者不依赖额外库也能拿到原始数据。

---

一、网络相关指标总览

指标	含义	推荐阈值	描述
DNS Lookup Time	DNS 解析时间	≤ 100ms（理想）	浏览器将域名解析为 IP 地址所需时间
Connection Time	TCP/TLS 连接时间	≤ 200ms（理想）	建立与服务器的连接，包括 TLS 握手的时间
Download Time	响应内容下载时间	≤ 1s（理想）	从收到第一个字节到接收完所有内容的时间
Render Blocking Resources	阻塞渲染资源加载时间	越低越好	CSS、JS 等阻塞首屏渲染的资源加载和执行耗时

---

二、指标详细解析

1. DNS Lookup Time

定义：DNS Lookup Time 是浏览器从请求发起到完成域名解析的耗时。
这是加载链路的第一步，过长的解析时间会延迟整个首屏渲染。

推荐值：
优秀：≤ 100 ms
可接受：100–300 ms
较差：> 300 ms

优化方向：

• 使用高性能 DNS（如 CDN、自建解析服务）
• DNS 预解析（<link rel="dns-prefetch">）
• 缓存 DNS 解析结果
• 减少跨域请求的数量

---

2. Connection Time

定义：Connection Time 是浏览器与目标服务器建立 TCP 连接（包含 TLS/SSL 握手）的耗时。网络抖动、服务器位置较远、TLS 握手复杂都会增加这个时间。

推荐值：
优秀：≤ 200 ms
可接受：200–500 ms
较差：> 500 ms

优化方向：

• 使用 HTTP/2 或 HTTP/3 减少连接次数
• 启用 TCP keep-alive
• 使用 CDN 让请求靠近用户
• 启用 TLS Session Resumption 缩短握手时间

---

3. Download Time

定义：Download Time 是从响应的第一个字节到最后一个字节完成下载的时间。影响因素包括资源体积、用户带宽和网络质量。

推荐值：
优秀：≤ 1 s
可接受：1–2.5 s
较差：> 2.5 s

优化方向：

• 压缩资源（Gzip、Brotli）
• 资源分片与懒加载
• 静态资源 CDN 加速
• 使用合适的图片格式（如 WebP、AVIF）

---

4. Render Blocking Resources

定义：Render Blocking Resources 是指阻止页面首次绘制的资源，例如：

• CSS（在加载完成前浏览器不会渲染内容）
• 同步 JS（阻塞解析和渲染）
• Web 字体（可能造成文字不可见）

推荐值：越低越好。Google 建议首屏关键渲染路径中的阻塞资源尽量少于 1–2 个，并尽量控制在 100–300ms 内加载完成。

优化方向：

• 减少关键 CSS 和 JS 体积
• 对非关键 CSS 使用 media 属性或 preload
• 使用 async 或 defer 加载 JS
• 关键字体预加载或使用 fallback 字体
• 使用 Critical CSS 内联首屏样式

---

三、在 React 项目中采集网络相关指标

这些指标几乎都可以通过 performance.getEntriesByType('navigation') 或 performance.getEntriesByType('resource') 拿到。

示例：

// src/utils/networkMetrics.ts
export function collectNetworkMetrics() {const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;if (!nav) return null;return {dnsLookupTime: nav.domainLookupEnd - nav.domainLookupStart,connectionTime: nav.connectEnd - nav.connectStart,tlsTime: nav.secureConnectionStart > 0 ? nav.connectEnd - nav.secureConnectionStart : 0,downloadTime: nav.responseEnd - nav.responseStart,renderBlockingTime: nav.domInteractive - nav.responseEnd,};
}

调用：

import { collectNetworkMetrics } from './utils/networkMetrics';window.addEventListener('load', () => {const metrics = collectNetworkMetrics();console.log(metrics);fetch('/api/performance', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(metrics),});
});

如果想对单个静态资源的加载耗时进行分析，可以使用：

const resources = performance.getEntriesByType('resource');
resources.forEach((res) => {console.log(res.name, res.duration, res.initiatorType);
});

这有助于定位哪些 JS/CSS 文件是“阻塞渲染”的主因。

---

四、Render Blocking Resources 的检测与优化建议

Render Blocking Resources 虽然没有浏览器原生的“一个数值”指标，但可以通过以下方式估算：

1. 计算 domInteractive - responseEnd 作为阻塞时间近似值
2. 使用 Lighthouse 报告阻塞资源列表
3. 分析 PerformanceResourceTiming，找出关键路径上的 CSS/JS

实战优化建议：

• 将关键 CSS 内联，非关键部分延迟加载
• 为 JS 添加 defer，避免阻塞 DOM 解析
• 利用 webpack splitChunks + preload 提升关键脚本加载速度
• 通过 HTTP/2 Server Push 或 Preload 关键资源

---

五、采集后的应用

场景	指标	典型问题	解决方向
DNS 慢	DNS Lookup	跨域资源多	DNS 预解析、CDN
连接慢	Connection	TLS 握手长	HTTP/2、CDN、Session Resumption
下载慢	Download	大文件	压缩资源、懒加载
首屏慢	Render Blocking	CSS/JS 阻塞渲染	defer/async、Critical CSS、拆包

---

六、React 项目实战建议

技术	应用
PerformanceNavigationTiming	采集 DNS/连接/下载时间
PerformanceResourceTiming	精确定位阻塞资源
Lighthouse	分析 Render Blocking Resources 报告
webpack + Preload	提升关键资源加载速度
CDN 与 HTTP/2	减少网络延迟