2018年把前端性能监控做到极致.pdf

1、把前端性能监控做到极致前端性能监控两驾马车真实用户性能数据（RUM）采集方案准确分析性能数据及影响因素性能数据助力产品优化前端性能监控是一项贵族运动温饱小康业务发展的三个阶段快速落地业务 解决关键痛点富裕业务查漏补缺 解决方案完整重视用户体验 细节决定成败富裕小康温饱前端性能监控两驾马车真实用户性能数据（RUM）采集方案准确分析性能数据及影响因素性能数据助力产品优化合成监控（Synthetic Monitoring，SYN）前端性能监控两驾马车提交审计目标查看审计结果运行审计功能https:/performanceaccessibilitybest practicesSEO前端性能监控两驾马车

2、使用 Lighthouse 命令行工具对淘宝首页进行合成性能测试提交审计目标运行审计功能查看审计结果前端性能监控两驾马车Google Lighthouse 系统架构图来源：Lighthouse Github repo合成监控（SYN）的优缺点前端性能监控两驾马车 优点 缺点实现简单，解决方案成熟合成条件配置复杂，无法全部还原真实场景能采集到更丰富的数据，如硬件指标或瀑布图登录等场景需要额外解决不影响真实用户的访问性能单次运行数据不够稳定可以提供页面加载幻灯片等可视化分析途径数据量较小，无法发挥更大价值*以上无法均指技术上较难实现或成本较大真实用户监控（Real User Monitoring，

3、RUM）前端性能监控两驾马车真实用户访问性能分析监控https:/ 优点 缺点无需配置模拟条件，完全还原真实场景一定程度影响真实用户的访问性能及流量消耗不存在登录等需要额外解决的场景无法采集硬件相关指标数据样本足够庞大，可以减少统计误差受传输限制无法采集完整的资源加载瀑布图性能数据可与其他数据关联产生更大价值无法可视化展示页面加载过程*以上无法均指技术上较难实现或成本较大前端性能监控方案对比对比项合成监控 SYN真实用户监控 RUM实现难度及成本较低较高采集数据丰富度丰富基础数据样本量较小大（视业务体量）适合场景支持团队自有业务，对性能做定性分析，或配合 CI 做小数据量的监控分析作为中台产品

4、支持前台业务，对性能做定量分析，结合业务数据进行深度挖掘前端性能监控两驾马车真实用户性能数据（RUM）采集方案准确分析性能数据及影响因素性能数据助力产品优化使用标准的API定义合适的指标采集正确的数据上报关联的维度真实用户性能数据（RUM）采集方案使用标准的APIperformance.timing真实用户性能数据（RUM）采集方案使用标准的APIperformance.timing 已废弃*真实用户性能数据（RUM）采集方案*见 MDN PerformanceTiming真实用户性能数据（RUM）采集方案 Web Performance 相关 specs 一览使用标准的APIHigh Res

5、olution Time Level 2Performance Timeline Level 2Resource Timing Level 2Navigation Timing Level 1Paint Timing Level 2User Timing Level 2Server TimingFrame Timing Long Task API Level 1Navigation Timing Level 1Navigation Timing Level 2使用标准的API High Resolution Time,HRTime真实用户性能数据（RUM）采集方案1秒=1,000毫秒=1,00

6、0,000微秒=1,000,000,000纳秒使用标准的API High Resolution Time,HRTime真实用户性能数据（RUM）采集方案使用标准的API真实用户性能数据（RUM）采集方案最佳实践1：采集性能数据时先抹平 Navigation Timing spec 差异，优先使用 Performance Timeline API定义合适的指标真实用户性能数据（RUM）采集方案：页面性能怎么样？：反正打开挺快的定义合适的指标真实用户性能数据（RUM）采集方案页面加载时长（Page Load Time,PLT）首屏加载时长（Above-the-Fold Time,AFT）DOM R