前端监控之性能监控

[xchunzhao]

前言

关于性能监控，主要是便于快速定位可能发生问题的性能点。另外，对于产品本身来说，也是提升用户体验的途径。

上篇 数据分类 也提到做性能监控需要收集的数据，就可以针对性的进行数据采集。接下来会针对每种性能指标进行分析。

如何采集

• 确定统计起点

  我们需要在用户输入 URL 或者点击链接的时候就开始统计，因为这样才能衡量用户的等待时间。如果你的用户高端浏览器占比很高，那么可以直接使用Navigation Timing接口来获取统计起点以及加载过程中的各个阶段耗时。另外也可以通过 cookie 记录时间戳的方式来统计，需要注意的是 Cookie 方式只能统计到站内跳转的数据。

• 网络耗时统计

这是Performance timing API提供的整个请求各个阶段的时间信息。

具体参数说明可以查阅 MDN Performance API

根据以上参数，性能指标的数据就有了。此类收集的时间分为两大类：

• 区间阶段耗时

  • DNS 解析耗时

    dns: timing.domainLookupEnd - timing.domainLookupStart
  

  • TCP 连接耗时

    tcp: timing.connectEnd - timing.connectStart
  

  • SSL 安全连接耗时

    ssl: timing.connectEnd - timing.secureConnectionStart
  

  • Time to First Byte（TTFB），网络请求耗时 TTFB 有多种计算方式，ARMS 以 Google Development 定义为准

    ttfb: timing.responseStart - timing.requestStart
  

  • 数据传输耗时

    trans: timing.responseEnd - timing.responseStart
  

  • DOM解析耗时

    dom: timing.domComplete - timing.domInteractive
  

  • 资源加载耗时

    res: timing.loadEventStart - timing.domContentLoadedEventEnd
  

  • 请求耗时

    req: timing.responseEnd - timing.requestStart
  

• 关键性能指标

  • 首包时间

    firstbyte: timing.responseStart - timing.domainLookupStart
  

  • First Paint Time, 首次渲染时间 / 白屏时间

    fpt: timing.responseStart - timing.navigationStart
  

  • Time to Interact，首次可交互时间

    tti: timing.domInteractive - timing.navigationStart
  

  • HTML 加载完成时间， 即 DOM Ready 时间

    ready: timing.domContentLoadedEventEnd - timing.fetchStart
  

  • 页面完全加载时间

    load: timing.loadEventEnd - timing.navigationStart
  

如何分析

让数据产生价值

• 均值与分布

  均值与分布是数据处理中最常见的两种方式。因为它能直观的表示指标的趋势与分布状况，方便进行评估、瓶颈发现与告警。处理过程中应去除异常值，例如明显超过阈值的脏数据等。

  百度FE 根据业内的调研，结合不同指标的特点，指定了指标的分布评估区间，如下图:

评估区间的制定方便我们了解当前性能状况，同时对性能趋势波动做出反应。

• 多维分析

  为了方便挖掘性能可能的瓶颈，需要从多维的角度对数据进行分析。例如移动端最重要的维度就是网络，数据处理上除了总体数据，还需要根据网络类型对数据进行分析。常见的维度还有系统、浏览器、地域运营商等。我们还可以根据自身产品的特点来确定一些维度，例如页面长度分布、简版炫版等。

参考

• 7天打造前端性能监控系统
• 前端监控数据收集perf
• 开发完第一版前端性能监控系统后的总结