通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕

• 日志采集
• 日志上报
• 数据分析
• 平台展示
• 异常报警
  

• 平台可以监控哪些数据？
• 会不会影响业务性能？
  

• 页面性能日志 — 实时统计与页面相关的 12 个关键性能指标，帮助您迅速准确地定位性能瓶颈：
  • DNS 解析耗时
  • TCP 连接耗时
  • SSL 安全连接耗时
  • 网络请求耗时
  • DOM 解析耗时
  • 资源加载耗时
  • 首包时间
  • 白屏时间
  • 首次可交互时间
  • DOM Ready 时间
  • 页面完全加载时间
  • ……
    
• 访问统计日志 — 统计 PV、UV 数据。短时间内断崖式的变化很容易反映业务问题。
  

• 页面稳定性日志 — 阿里云前端监控以 JS 错误率衡量页面运行稳定性，会采集因页面加载和页面交互产生的 JS Error 报错文件、错误堆栈的详细信息，快速定位用户访问时发生的错误问题。
  

• API 调用日志 — 提供 API 调用结果、耗时及相关信息，快速发现并定位 API 问题。
  

• 自定义上报日志 — 某些业务逻辑的结果、速度、统计值等自定义内容可帮助您发现业务问题。
  

HTTP/1.1 效果

HTTP/2.0 效果压缩头部后，每条日志请求都大幅缩小，响应的速度也相应提升。HTTP/2 多路复用用户浏览器和日志服务器之间产生多次 HTTP 请求，而在 HTTP/1.1 Keep-Alive 下，日志上报会以串行的方式传输，并让后面的日志上报延时。通过 HTTP/2 的多路复用来合并上报，可为您节省网络连接的开销。第三招：HTTP POST 合并POST 请求因为 request body 可以有更大施展空间，相比一条日志一次 HTTP HEAD 请求的方式，在 HTTP POST 中一次包含多条日志的内容更加经济。在 HTTP POST 的基础上，可以顺便解决用户关掉或者切换页面造成的漏报问题。以前常见的解决方式是监听页面的 unload 或者 beforeunload 事件，并以通过同步的 XMLHttpRequest 请求或者构造一个特定 src 的 标签来延迟上报。window.addEventListener("unload", uploadLog, false);function uploadLog() {  var xhr = new XMLHttpRequest();  xhr.open("POST", "/r.png", false); // false表示同步  xhr.send(logData);}这种上报方式的弊端是会影响下一个页面的性能。更优雅的方式是使用 navigator.sendBeacon()，它能够异步发送日志数据。window.addEventListener("unload", uploadLog, false);function uploadLog() {  navigator.sendBeacon("/r.png", logData);}

合并前合并后（navigator.sendBeacon）理想情况下，合并 N 个日志上报耗费的总时间可缩减至原来的 1/N。总结阿里云前端监控的日志上报整体优化流程如下：经过这几步优化后，日志上报性能明显提升：

• 日志上报的传输量可大幅降低至原来的 1/10 左右
• 日志上报响应时间可提速 80% 左右
  

实际大促业务场景在线上的验证结果表明，业务性能不会受到影响。所以，即便您的业务访问量级较大或者性能要求较高，也无需担心接入后的性能问题，可放心接入使用。附：阿里云业务实时监控服务（ARMS）前端监控系介绍

• 业务实时监控服务（ARMS）
• 应用监控
• 前端监控
• 自定义监控
  

原文链接