页面性能监控

页面性能监控

接入方式

const aegis = new Aegis({
  id : 'xxxx',
  appKey: 'xxxxxxx',
  plugin: {
    pagePerformance: true,
  },
})

监控指标

页面加载性能指标

• dnsLookup: DNS解析时间，计算公式：domainLookupEnd - domainLookupStart（单位：ms）
• tcp: TCP连接建立时间，计算公式：connectEnd - connectStart（单位：ms）
• ssl: SSL握手时间，计算公式：requestStart - secureConnectionStart（单位：ms）
• ttfb: 首字节到达时间，计算公式：responseStart - requestStart（单位：ms）
• contentDownload: 内容下载时间，计算公式：responseEnd - responseStart（单位：ms）
• domParse: DOM解析时间，计算公式：domInteractive - domLoading（单位：ms）
• resourceDownload: 资源下载时间，计算公式：loadEventStart - domInteractive（单位：ms）
• firstScreenTiming: 首屏渲染时间，通过MutationObserver和PerformanceObserver计算得出（单位：ms）

数据来源说明
前7项指标数据来源于 PerformanceTiming 接口。

首屏耗时说明
首屏耗时对应的 DOM 元素可通过打印 aegis.firstScreenInfo 查看。
若默认 DOM 元素不能准确代表首屏，可通过以下方式自定义：

• 标记关键元素：在元素上添加属性 AEGIS-FIRST-SCREEN-TIMING，SDK 会将该元素识别为首屏关键元素，SDK 认为只要用户首屏出现此元素就是首屏完成
• 忽略元素：在元素上添加属性 AEGIS-IGNORE-FIRST-SCREEN-TIMING，SDK会把该 dom 列入黑名单

tip

sdk 根据 DOM 变化记录首屏，如果你的 sdk 引入较晚，或者初始化较晚，可能会出现无法获取首屏的情况(即firstScreenTiming值为0的情况)，如果出现这种情况的话，建议可以试着把 sdk 引入和初始化放在更前面，比如 head 里，然后再观察一下数据。。

数据采集机制

• 触发时机：页面加载完成后自动计算并上报
• 首屏计算：使用MutationObserver监听DOM变化，结合PerformanceObserver监听paint事件
• 标记元素：支持通过AEGIS-FIRST-SCREEN-TIMING属性标记首屏关键元素
• 忽略元素：支持通过AEGIS-IGNORE-FIRST-SCREEN-TIMING属性忽略特定元素
• 重试机制：首屏计算失败时最多重试3次，每次间隔3秒

数据格式示例

{
  "type": "PAGE_PERFORMANCE",
  "msg": "页面性能数据上报",
  "dnsLookup": 50,
  "tcp": 120,
  "ssl": 80,
  "ttfb": 200,
  "contentDownload": 800,
  "domParse": 300,
  "resourceDownload": 500,
  "firstScreenTiming": 1800,
  "engineInit": 100,
  "bundleLoad": 200
}