首屏时间应以用户可见内容为基准，优先使用performance.getEntriesByType('navigation')[0]并校验name匹配当前页，结合responseStart、domInteractive等语义字段计算关键阶段耗时，避开0值干扰与跨域限制。
直接用 performance.getEntriesByType('navigation')[0] 获取首航数据，再按语义字段相减，就能精准得到首屏加载各阶段耗时。关键不是“能不能算”，而是“哪些字段能用、哪些要跳过、哪些需校验”。
确保拿到的是当前页的导航数据
不能假设数组第一个条目就是你要的页面——iframe 预加载、SPA 路由跳转都可能污染结果。
- 先取
const entries = performance.getEntriesByType('navigation') - 检查
entries.length > 0且entries[0].name === location.href - 若不匹配，说明是子帧或预加载记录，应忽略
识别真正有效的阶段时间差
很多字段在无对应行为时返回 0（比如没重定向，redirectStart 就是 0），直接相减会得出错误的“0ms”。必须结合上下文判断是否发生该阶段。
-
DNS 查询耗时：
domainLookupEnd - domainLookupStart，仅当domainLookupStart > 0且不等于fetchStart时有效 -
TCP 连接耗时：
connectEnd - connectStart，若connectStart === domainLookupEnd，说明复用连接，该阶段可视为 0 -
SSL 握手耗时：
connectEnd - secureConnectionStart，仅当secureConnectionStart > 0且secureConnectionStart !== connectStart时成立 -
TTFB（首字节时间）：
responseStart - requestStart，最核心的后端响应指标，只要页面非强缓存，这个值就可靠
聚焦首屏可感知的关键节点
首屏加载不是看 load，而是看内容何时开始出现、何时可交互。Navigation Timing 提供了明确锚点：
-
白屏时间：从
navigationStart到responseStart，代表用户等待空白页的时长 -
首屏渲染起点：
domInteractive表示 DOM 解析完成、脚本可执行；domContentLoadedEventStart是 DOM 构建就绪、样式计算完毕的时间 -
首屏内容可见：虽然 Navigation Timing 不直接提供 FCP，但
responseStart到domContentLoadedEventStart已覆盖资源加载+HTML 解析+CSSOM 构建主路径，是首屏内容呈现的关键窗口
注意执行时机和兼容性边界
这些数据只在页面生命周期早期稳定存在，晚读可能被清空或截断。
- 推荐在
<head>内尽早执行，不要等DOMContentLoaded或window.onload - 避免使用已废弃的
performance.timing，它在 Safari 和部分旧浏览器中字段缺失或返回0 - 跨域 iframe 的导航条目会被限制字段（如
redirectStart恒为 0），不影响主文档测量
