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

7、eady 时长 DOM Complete 时长 DOM Interactive 时长 首字节等待时长（Time to First Byte,TTFB）首次渲染时长（First Paint）首次内容渲染时长（First Contentful Paint）首次有效渲染时长（First Meaningful Paint）首次可交互时长（First Interactive）首次 CPU 空闲时长（First CPU Idle）Speed Index Perceptual Speed Index Last Painted Heros Paint Phase Timing 开始渲染（Start Rende

8、r）视觉完整时间（Visually Complete）页面加载时长（Page Load Time,PLT）首屏加载时长（Above-the-Fold Time,AFT）DOM Ready 时长 DOM Complete 时长 DOM Interactive 时长 首字节等待时长（Time to First Byte,TTFB）首次渲染时长（First Paint）首次内容渲染时长（First Contentful Paint）首次有效渲染时长（First Meaningful Paint）首次可交互时长（First Interactive）首次 CPU 空闲时长（First CPU Idle）

9、Speed Index Perceptual Speed Index Last Painted Heros Paint Phase Timing 开始渲染（Start Render）视觉完整时间（Visually Complete）页面加载时长 Page Load Time真实用户性能数据（RUM）采集方案load 事件触发完成页面加载时长 load淘宝上海品茶页面加载时长真实用户性能数据（RUM）采集方案页面加载时长 load真实用户性能数据（RUM）采集方案淘宝网页面加载时长-4x慢放-局部页面加载时长 load真实用户性能数据（RUM）采集方案淘宝网页面加载-异常情况页面加载时长 load真

10、实用户性能数据（RUM）采集方案异常情况正常情况页面加载时长 Page Load Time真实用户性能数据（RUM）采集方案优点原生 API接受度高感知明显（浏览器 Tab 停止 loading）缺点无法准确反映页面加载性能易受特殊情况影响load 事件触发完成首次渲染/首次内容渲染 First Paint&First Contentful Paint真实用户性能数据（RUM）采集方案首次渲染：第一个非网页背景像素渲染首次内容渲染：第一个文本、图像、背景图片或非白色 canvas/SVG 渲染High Resolution Time Level 2Performance Timeline Le

11、vel 2Resource Timing NavigationTiming Paint Timing Level 2User Timing Level 2Server TimingFrame Timing Long Task API Level 1NavigationTiming NavigationTiming 首次渲染&首次内容渲染 fp&fcp真实用户性能数据（RUM）采集方案First Paint:6.713 s First Contentful Paint:6.713 s首次渲染&首次内容渲染 fp&fcp真实用户性能数据（RUM）采集方案 70%的情况下First Paint 与

12、First Contentful Paint 相差小于 100ms首次渲染/首次内容渲染 First Paint&First Contentful Paint真实用户性能数据（RUM）采集方案优点原生 API衡量内容渲染时间，更贴近用户感知缺点像素渲染不代表用户看见有效内容大多数时候两个指标差异不大首次渲染：第一个非网页背景像素渲染首次内容渲染：第一个文本、图像、背景图片或非白色 canvas/SVG 渲染首次有效渲染 First Meaningful Paint真实用户性能数据（RUM）采集方案页面结构发生剧烈变动（详细算法）首次有效渲染 fmp真实用户性能数据（RUM）采集方案首次有效渲染

13、 First Meaningful Paint真实用户性能数据（RUM）采集方案优点相对校准的估算出内容渲染时间贴近用户感知缺点无原生 API 支持算法推导时 DOM 节点不含权重DOM 结构发生剧烈变动（详细算法）开始渲染 Start Render真实用户性能数据（RUM）采集方案优点最直观、准确反映界面发生变化的指标缺点由于使用逐帧对比技术，无法在 RUM 场景使用肉眼能观察到的页面内容发生变化的时间开始渲染 SR真实用户性能数据（RUM）采集方案优点缺点最直观、准确反映界面发生变化的指标由于使用逐帧对比技术，无法在 RUM 场景使用定义肉眼能观察到的内容渲染定义合适的指标真实用户性能数据

14、（RUM）采集方案页面加载时长（Page Load Time,PLT）首屏加载时长（Above-the-Fold Time,AFT）DOM Ready 时长 DOM Complete 时长 DOM Interactive 时长 首字节等待时长（Time to First Byte,TTFB）首次渲染时长（First Paint）首次内容渲染时长（First Contentful Paint）首次有效渲染时长（First Meaningful Paint）首次可交互时长（First Interactive）首次 CPU 空闲时长（First CPU Idle）Speed Index Percep

15、tual Speed Index Last Painted Heros Paint Phase Timing 开始渲染（Start Render）视觉完整时间（Visually Complete）页面加载时长（Page Load Time,PLT）首屏加载时长（Above-the-Fold Time,AFT）DOM Ready 时长 DOM Complete 时长 DOM Interactive 时长 首字节等待时长（Time to First Byte,TTFB）首次渲染时长（First Paint）首次内容渲染时长（First Contentful Paint）首次有效渲染时长（First

16、 Meaningful Paint）首次可交互时长（First Interactive）首次 CPU 空闲时长（First CPU Idle）Speed Index Perceptual Speed Index Last Painted Heros Paint Phase Timing 开始渲染（Start Render）视觉完整时间（Visually Complete）性能指标类型 优点 缺点 典型代表DOM 相关兼容性高，易采集无法准确反映性能load、dom ready、dom completeSpec 相关官方支持，相对易采集部分场景无法准确反映性能fp、fcp算法相关兼容性高，易采集

17、，相对准确部分场景存在计算误差情况fmp、speed index视觉相关最直观的反馈页面加载性能无法通过 RUM 方式采集start render、visual complete最佳实践2：根据业务特性及性能监控方案选择最适合的性能指标，必要情况下可使用自定义性能点位采集正确的数据真实用户性能数据（RUM）采集方案采集正确的数据-不同阶段之间是连续的吗？真实用户性能数据（RUM）采集方案采集正确的数据-不同阶段之间是连续的吗？真实用户性能数据（RUM）采集方案同域名 TCP 连接并发限制浏览器正在分配缓存空间当前有更高优先级请求正在处理采集正确的数据-每个阶段都一定会发生吗？真实用户性能数据（

18、RUM）采集方案最佳实践3：上报页面加载开始时间，以及后续各时间点相对增量，在数据端进行阶段清洗和异常处理上报关联的维度真实用户性能数据（RUM）采集方案时间页面浏览器操作系统常规维度地理位置专业维度页面是否可见页面加载方式等效网络连接类型是否启用 Service Worker是否启用 HTTP/2 或 SPDY是否启用 GZIP 压缩前端性能监控两驾马车真实用户性能数据（RUM）采集方案准确分析性能数据及影响因素性能数据助力产品优化准确分析性能数据及影响因素长尾数据从何而来准确分析性能数据及影响因素Web 性能硬件网络浏览器CDN服务端缓存意想不到的性能影响因素准确分析性能数据及影响因素Tab 可见状态页面加载方式（打开、前进后退、刷新）Service Worker准确分析性能数据及影响因素数据是如何撒谎的95 分位数平均数10%截尾平均数最佳实践4：分析性能指标时建议关注百分位数（percentile），对性能的要求越高，使用越大的百分位数前端性能监控两驾马车真实用户性能数据（RUM）采集方案准确分析性能数据及影响因素性能数据助力产品优化性能数据助力产品优化蚂蚁金服体验分析产品九色鹿性能数据助力产品优化性能数据助力蚂蚁金服中后台产品体验升级