直接使用 performance.getEntriesByType('navigation')[0] 获取最完整精准的页面加载时间线，含13+个以 timeOrigin 为基准的高精度时间戳；TTFB、白屏、可交互、完全加载等关键指标均可精确计算；通过 resource 类型条目分析资源瓶颈；用 mark/measure 标记业务逻辑耗时；PerformanceObserver 异步监听 paint、longtask、resource 等事件；上报优先采用 sendBeacon。
直接用 performance.getEntriesByType('navigation')[0] 获取本次页面加载最完整、最精准的时间线数据，比已废弃的 performance.timing 更可靠、字段更全、语义更清晰。
抓导航级关键时间点
导航条目（PerformanceNavigationTiming）提供 13+ 个标准化高精度时间戳，全部以 performance.timeOrigin 为统一基准，避免系统时钟漂移问题。
-
TTFB（首字节时间）：用
responseStart - requestStart，反映后端响应能力 -
白屏时间：用
responseStart - startTime，即用户看到空白页的等待时长 -
可交互时间（DOM 就绪）：用
domContentLoadedEventEnd - fetchStart，标识 HTML 解析完成、事件可绑定的节点 -
完全加载时间：用
loadEventEnd - fetchStart，包含图片、iframe 等所有资源
查资源加载瓶颈在哪
调用 performance.getEntriesByType('resource') 获取所有已完成加载的脚本、CSS、图片等资源记录。每项含 startTime、responseEnd、transferSize 等字段，支持精细归因。
- 按
initiatorType过滤（如'script'、'img'），聚焦首屏关键资源 - 计算 DNS 查询耗时：
domainLookupEnd - domainLookupStart（若为 0，说明缓存或复用） - 计算 TCP/SSL 耗时：
connectEnd - connectStart和connectEnd - secureConnectionStart（HTTPS 专属） - 跨域资源需服务端返回
Timing-Allow-Origin: *，否则部分字段为空或为 0
标业务逻辑真实耗时
用 performance.mark() 和 performance.measure() 把性能数据对齐到具体功能，比如搜索、登录、首屏渲染等。
立即学习“Java免费学习笔记（深入）”；
- 在关键入口打标记：
performance.mark('login_start') - 在结果就绪时再打：
performance.mark('login_end') - 生成可统计区间：
performance.measure('login_duration', 'login_start', 'login_end') - 后续通过
performance.getEntriesByName('login_duration')或getEntriesByType('measure')提取数据
监听动态绘制与长任务
用 PerformanceObserver 实现非阻塞、异步监听，捕获 SPA 路由切换、懒加载、重绘等运行时指标。
- 监听
'paint'类型，获取first-paint和first-contentful-paint - 监听
'longtask'，识别 JS 执行阻塞主线程的长任务（持续 ≥50ms） - 监听
'resource'，实时捕获新加载资源（如懒加载图片、动态 import） - 上报数据优先用
navigator.sendBeacon()，确保页面卸载前可靠发送
