可通过 performance.getEntriesByType("navigation") 获取导航性能数据，其中 DNS 耗时 = domainLookupEnd - domainLookupStart，TCP 耗时 = connectEnd - connectStart，TLS 耗时 = connectEnd - secureConnectionStart（仅 HTTPS 且 secureConnectionStart > 0 时有效）。
可以通过 performance.getEntriesByType("navigation") 获取页面导航性能数据，其中 PerformanceNavigationTiming 对象（现代浏览器中已替代旧的 PerformanceTiming）提供了 DNS 解析和 TCP 连接各阶段的精确时间戳，进而计算出耗时。
DNS 解析耗时：从域名开始解析到完成
DNS 解析耗时 = domainLookupEnd - domainLookupStart。若两者相等（即为 0），说明使用了本地缓存或复用已有连接，未发起新的 DNS 查询。
-
domainLookupStart：浏览器准备进行 DNS 查询的起始时间（毫秒，相对于
navigationStart） - domainLookupEnd：DNS 查询完成的时间；若为 0，表示未执行 DNS 查询
TCP 连接耗时：从开始建连到完成三次握手
TCP 连接耗时 = connectEnd - connectStart。注意该值包含 SSL/TLS 握手时间（如有 HTTPS），若需纯 TCP 耗时，可减去 secureConnectionStart（但仅当启用 HTTPS 且该值 > 0 时有效）。
- connectStart：浏览器开始建立 TCP 连接（含 DNS 后）的时间
- connectEnd：TCP 连接建立完成（含 TLS 握手结束）的时间
- secureConnectionStart：TLS 握手开始时间（HTTP 时为 0；HTTPS 时若为 0 表示未进行 TLS 握手或不支持该字段）
实际获取代码示例
确保在页面加载完成后读取（如 load 或 DOMContentLoaded 事件中），避免因数据未就绪而返回 undefined：
立即学习“前端免费学习笔记（深入）”；
if (performance.getEntriesByType) {
const navEntries = performance.getEntriesByType("navigation");
if (navEntries.length > 0) {
const nav = navEntries[0]; // 页面主导航记录
const dnsTime = nav.domainLookupEnd - nav.domainLookupStart;
const tcpTime = nav.connectEnd - nav.connectStart;
const tlsTime = nav.secureConnectionStart > 0
? nav.connectEnd - nav.secureConnectionStart
: 0;
<pre class="brush:php;toolbar:false;">console.log("DNS 耗时:", dnsTime, "ms");
console.log("TCP 耗时:", tcpTime, "ms");
console.log("TLS 握手耗时:", tlsTime, "ms");} }
注意事项与兼容性
PerformanceNavigationTiming 在 Chrome 77+、Firefox 79+、Edge 79+ 中完整支持；Safari 支持较晚（iOS 15.4+/macOS 12.3+）。旧版可通过 performance.timing 回退（已废弃但仍可用），但精度较低且部分字段语义模糊（如 fetchStart 可能早于 domainLookupStart）。
- 确保页面通过 HTTP/HTTPS 加载（file:// 协议下多数 timing 字段为 0）
- 跨域重定向会清空部分计时字段（如
domainLookupStart可能为 0），影响准确性 - 若页面由缓存直接加载（如 bfcache 恢复），
type字段为"back_forward_cache"，此时多数网络阶段时间为 0
