performance api 是现代浏览器原生支持的标准方案，可精确获取页面加载各阶段耗时：通过 navigation timing 获取 load、domcontentloaded 等时间点，paint timing 获取 fp/fcp，resource timing 获取资源加载详情，并支持空闲时上报核心性能指标。
可以通过 Performance API 获取页面加载各阶段的精确耗时，这是现代浏览器原生支持、无需第三方库的标准方案。
获取关键加载时间点（Navigation Timing）
使用 window.performance.getEntriesByType('navigation') 可拿到导航相关的完整时间戳数据，其中第一项即当前页面加载记录：
-
loadEventStart - fetchStart：从发起请求到load事件触发的总耗时 -
domContentLoadedEventEnd - fetchStart：到 DOM 解析完成并执行完脚本的时间 -
connectEnd - connectStart：TCP 连接建立耗时（含 TLS 握手） -
responseStart - requestStart：服务器响应返回耗时（TTFB）
计算首屏渲染时间（FP/FCP）
使用 performance.getEntriesByType('paint') 获取绘制时间点：
-
name === 'first-paint'表示浏览器首次渲染像素（FP），兼容性较好 -
name === 'first-contentful-paint'表示首个文本、图像或非空白 canvas 渲染时间（FCP），更贴近用户感知 - 注意：需在
DOMContentLoaded或之后调用，确保 paint 条目已生成
监听资源加载耗时（Resource Timing）
通过 performance.getEntriesByType('resource') 查看 JS/CSS/图片等资源加载详情：
- 每个条目含
startTime、duration、fetchStart、responseEnd等字段 - 可筛选大图或关键脚本：
entry.name.includes('.js') && entry.duration > 500 - 注意跨域资源可能缺失详细时间（需服务端设置
Timing-Allow-Origin响应头）
简单封装统计上报逻辑
可在页面空闲时（如 requestIdleCallback）收集并上报数据：
- 避免阻塞主线程，尤其在
load后立即执行 - 上报内容建议包含：FP、FCP、DOM 加载、资源加载异常数、最大内容绘制（LCP）等核心指标
- 配合
performance.memory（如支持）可补充内存占用，辅助分析卡顿原因
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
