直接用 performance.getEntriesByType('navigation')[0] 获取最完整精准的页面加载时间线，含13+个高精度标准化时间戳；TTFB、白屏、可交互、完全加载等关键指标均可精确计算；资源瓶颈通过 getEntriesByType('resource') 分析；业务耗时用 mark/measure 标记；PerformanceObserver 监听 paint、longtask、resource 等动态指标；数据用 sendBeacon 可靠上报。
直接用 performance.getEntriesByType('navigation')[0] 就能拿到本次页面加载最完整、最精准的时间线数据，比已废弃的 performance.timing 更可靠、字段更全、语义更清晰。
抓导航级关键时间点
导航条目（PerformanceNavigationTiming）提供 13+ 个标准化时间戳，全部基于高精度时钟，且以 performance.timeOrigin 为统一基准，避免了 Date.now() 的系统时钟漂移问题。
-
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-contentful-paint（FCP）和largest-contentful-paint（LCP） - 监听
'longtask'发现主线程阻塞超过 50ms 的 JS 执行，定位卡顿根源 - 监听
'resource'捕获后续动态插入的资源（如document.createElement('script')） - 记得在不需要时调用
observer.disconnect()，防止内存泄漏
数据采集后建议用 navigator.sendBeacon() 上报，不阻塞页面卸载，确保关键性能数据不丢失。重点上报超时资源（如 TTFB > 800ms）、慢渲染（LCP > 2.5s）、长任务（duration > 100ms）等异常值，便于持续优化。
