JavaScript Performance API 通过 Navigation Timing、PerformanceObserver 和 User Timing 三类接口实现轻量可靠的页面性能测量：前者获取导航生命周期数据，中者动态监听 paint/resource/longtask 事件，后者支持自定义打点与测量。
用 JavaScript 的 Performance API 测量页面性能，核心是利用浏览器原生提供的高精度时间戳和标准化指标，不依赖第三方库，轻量且可靠。
获取关键性能时间点（Navigation Timing）
通过 performance.getEntriesByType('navigation') 获取页面导航的完整生命周期数据，比如 DNS 查询、TCP 连接、SSL 协商、请求响应、DOM 解析、资源加载等耗时。
- 首次调用前确保页面已加载完成（如在
load事件后），否则可能返回空数组 - 典型字段包括：
connectStart、responseEnd、domContentLoadedEventEnd、loadEventEnd - 示例：计算白屏时间（FCP 前可用的近似值）可取
responseEnd - fetchStart；首屏渲染时间建议优先用PerformanceObserver监听paint类型
监听绘制与资源加载（PerformanceObserver）
用 PerformanceObserver 动态监听关键性能事件，比轮询更高效、更及时。
- 监听
'paint'获取 FP（First Paint） 和 FCP（First Contentful Paint） - 监听
'resource'查看各静态资源（JS/CSS/图片）的加载耗时与瓶颈 - 监听
'longtask'发现阻塞主线程超过 50ms 的任务（需开启entryTypes: ['longtask']） - 注意：observer 需在页面早期创建（如
中 script 标签内），避免错过初始 paint 事件
手动打点与自定义指标（User Timing）
用 performance.mark() 和 performance.measure() 在业务关键路径中插入自定义标记，测量逻辑段耗时。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“Java免费学习笔记（深入）”；
- 例如：在 React 组件挂载前打
mark('render-start')，渲染完成后打mark('render-end')，再用measure('render-time', 'render-start', 'render-end')计算 - 所有 mark/measure 数据可通过
performance.getEntriesByType('mark')或'measure'获取 - 适合追踪首屏渲染、接口聚合、动画启动等业务相关性能节点
上报与分析小技巧
测量只是第一步，合理上报才能持续优化。
- 避免高频上报：对非关键指标（如每个 resource）可采样（如 10%）或聚合后上报
- 结合
performance.memory（若支持）观察内存占用，辅助判断内存泄漏 - 注意跨域资源限制：部分字段（如
duration）在跨域脚本/图片上可能为 0，需检查transferSize和encodedBodySize辅助判断 - 开发阶段可用
performance.toJSON()快速导出全部数据查看结构
基本上就这些。Performance API 不复杂但容易忽略细节，重点是选对时机、用对类型、结合业务打点——测得准，才改得对。
