最可靠方式是用 performance.getEntriesByType("navigation")[0] 获取导航时间线，它提供高精度、语义清晰的 Level 2 数据，替代已废弃的 performance.timing；需在 DOMContentLoaded 或 load 中调用并校验 entry.name 和兜底处理。
直接用 performance.getEntriesByType("navigation")[0] 获取当前页面的完整渲染时间线，这是最可靠、精度最高、现代浏览器全支持的方式；别再手动打点或依赖已废弃的 performance.timing。
为什么必须用 performance.getEntriesByType("navigation")
它返回的是 Navigation Timing Level 2 数据，字段更全（比如 domContentLoadedEventEnd、loadEventEnd）、时间戳是高精度浮点数（微秒级），且语义清晰。而 performance.timing 不仅字段模糊（如 responseStart 含义不明确）、精度低（整数毫秒），还在 Chrome 120+ 中被标记为 deprecated。
- 调用时机很关键：必须在
DOMContentLoaded或load回调中执行，否则可能取到空数组 - 要校验来源：
entry.name === location.href，避免 iframe 或预加载条目干扰 - 必须兜底：
const nav = performance.getEntriesByType("navigation")[0] || {}，因为 Service Worker 拦截或某些跳转方式会导致数组为空
navigationStart 到 domContentLoadedEventEnd 是可交互时间，不是白屏时间
很多人误把 domContentLoadedEventEnd - navigationStart 当作“用户能点按钮的时间”，其实它只是 DOM 构建完成 + 所有同步脚本执行完的时刻——但样式还没应用、字体可能未加载、CSSOM 可能阻塞了渲染树合成。真正反映用户感知的“可交互”，应结合 first-input-delay（需 PerformanceObserver）或监控 document.readyState === 'interactive' 的实际触发点。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 白屏时间应算
domLoading - fetchStart，注意fetchStart是导航发起时刻，比navigationStart更准 -
TTFB推荐用responseStart - requestStart；若requestStart为 0（Safari 常见），改用responseStart - fetchStart - 很多字段为 0 并非耗时为 0，而是该阶段被跳过（如复用连接时
connectStart === 0）
怎么把时间线数据安全输出到控制台或上报
不能直接 console.log(nav)，因为 DevTools 控制台会惰性求值，点开对象时属性可能已被 GC 或覆盖；也不能在 load 事件前就尝试读取，容易取不到。
- 推荐做法：在
DOMContentLoaded回调里立即深拷贝关键字段：JSON.parse(JSON.stringify(nav))，再输出或上报 - 上报时剔除冗余字段，只留
navigationStart、domContentLoadedEventEnd、loadEventEnd、type、redirectCount - 如果页面有 SPA 路由切换，每次
pushState后要主动调用performance.getEntriesByType("navigation")并过滤type === "navigate"的新条目
真正难的不是采集时间点，而是理解每个字段背后的浏览器行为——比如 secureConnectionStart === 0 意味着没走 HTTPS，transferSize === 0 表示资源来自内存缓存。这些隐含信息比数字本身更有调试价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
