⚡ 30 秒速记

• 导航、资源、用户标记分别对应性能条目
• 新采集用导航条目，别依赖旧 performance.timing
• PerformanceObserver 持续观察新增数据
• 自定义流程用 mark / measure
• 回调频率、内存接口都有支持与解释边界

Performance API 提供的是时间证据，帮助把等待拆成具体阶段。 导航条目看页面加载，资源条目看图片和脚本，自定义标记可以测量提交到完成等业务过程。持续变化的数据适合用观察器收集，不必全部等页面加载结束。跨域详细时序受权限限制，动画回调间隔也不等于完整的实际呈现质量，采集后仍要结合场景解释。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

Performance 提供导航、资源和用户计时等条目。新采集优先读取 PerformanceNavigationTiming、PerformanceResourceTiming，再用 PerformanceObserver 监听需要的条目，不必统一等到 load 才开始。

function reportNavigation() {
  const nav = performance.getEntriesByType('navigation')[0]
  if (!nav) return
  console.table({
    ttfb: nav.responseStart - nav.startTime,
    download: nav.responseEnd - nav.responseStart,
    domReady: nav.domContentLoadedEventEnd - nav.startTime,
    load: nav.loadEventEnd > 0 ? nav.loadEventEnd - nav.startTime : null
  })
}
// 延后一项任务，避免在 load 回调内部把尚未确定的 loadEventEnd 当成最终值
if (document.readyState === 'complete') setTimeout(reportNavigation, 0)
else window.addEventListener('load', () => setTimeout(reportNavigation, 0), { once: true })

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration)
  }
})
observer.observe({ type: 'resource', buffered: true })
// 停止采集时调用 observer.disconnect()