摘要: 本文将为您介绍,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控如何优化日志上报
前端监控 (又叫UEM,User Experience Management, 用户体验管理) 一般帮助用户定位页面性能瓶颈、复现用户端的偶发问题。其监控的主要功能包括但不限于:
- 日志采集
- 日志上报
- 数据分析
- 平台展示
- 异常报警
使用前端监控平台时,用户最关心的问题往往首先是:
- 平台可以监控哪些数据?
- 会不会影响业务性能?
这就涉及到前端监控的监控指标和日志上报。带着这两个问题,本文就为您介绍一下,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控(以下简称为阿里云前端监控)如何优化日志上报,让上报速度快、更快、无比快!
文章主要分为两个部分:第一部分"监控指标介绍"解释前端监控一般需要上报哪些数据;第二部分"日志上报优化秘笈"解释前端监控如何针对这些数据上报进行优化。
监控指标介绍
阿里云前端监控专注于 Web 端真实用户体验数据监控,从访问速度、页面运行稳定性和服务调用成功率三个方面监控前端的健康度。另外,阿里云前端监控还提供针对轻量级交互行为的实时统计功能,可帮助您及时发现业务问题。
阿里云前端监控的指标如下:
1. 页面是否正常响应
-
页面性能日志 — 实时统计与页面相关的 12 个关键性能指标,帮助您迅速准确地定位性能瓶颈:
- DNS 解析耗时
- TCP 连接耗时
- SSL 安全连接耗时
- 网络请求耗时
- DOM 解析耗时
- 资源加载耗时
- 首包时间
- 白屏时间
- 首次可交互时间
- DOM Ready 时间
- 页面完全加载时间
- ……
- 访问统计日志 — 统计 PV、UV 数据。短时间内断崖式的变化很容易反映业务问题。
2. 页面运行是否稳定
- 页面稳定性日志 — 阿里云前端监控以 JS 错误率衡量页面运行稳定性,会采集因页面加载和页面交互产生的 JS Error 报错文件、错误堆栈的详细信息,快速定位用户访问时发生的错误问题。
3. API 请求是否正常响应
- API 调用日志 — 提供 API 调用结果、耗时及相关信息,快速发现并定位 API 问题。
4. 业务相关日志
- 自定义上报日志 — 某些业务逻辑的结果、速度、统计值等自定义内容可帮助您发现业务问题。
如果前端业务复杂、访问量级较大,那么相应地,前端监控上报的日志类型及日志量也会快速增长。前端监控的最基本原则是日志获取和日志上报不能影响业务性能,所以在这种情况下,日志上报性能尤为重要。
接下来,我们就介绍一下阿里云前端监控平台的日志上报优化秘笈。只要学会了这几种新姿势,即便日志量不断增长,您也能游刃有余!
日志上报优化秘笈
第一招:HTTP No Content
日志上报只关心日志有没有上报,并不关心上报请求的返回内容,甚至完全可以不需要返回内容。所以使用 HTTP HEAD 的方式上报,并且返回的响应体为空,可避免响应体传输造成的资源损耗。只需要设置一个 nginx 服务器来记录日志内容并返回 200 状态码即可。
fetch(`${url}?t=perf&page=lazada-home&load=1168`, {mode:'no-cors',method:'HEAD'})
第二招:HTTP 2.0
HTTP/2 头部压缩
每次 HTTP 请求都会传输一系列的请求头来描述请求的资源及其特性,然而实际上每次请求都有很多相同的值,如 Host:
、user-agent:
、Accept
等。这些数据会占用 300-800 byte 的传输量,如果携带大的 cookie,请求头甚至会占据 1 kb 的空间,而实际真正需要上报的日志数据仅有 10~50 byte。在 HTTP 1.x 中,每次日志上报请求头都携带了大量的重复数据导致性能浪费。
HTTP/2 头部压缩采用 Huffman Code 压缩请求头,并用动态表更新每次请求不同的数据,从而将每次请求的头部压缩到很小。
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
的<img>
标签来延迟上报。
window.addEventListener("unload", uploadLog, false); functionuploadLog() { 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)前端监控系介绍
相关推荐
加密解密技术内幕加密解密技术内幕加密解密技术内幕加密解密技术内幕加密解密技术内幕
阿里云应用性能管理APM产品应用实时监控服务ARMS技术解密资料下载.pdf
加密解密,前端加密,后端解密,CryptoJS,AESEncryptUtil.java DESEncryptUtil.java Base64EncodeUtil.java MD5Util.java
第1章 走进数据解密 1.1 数据解密是什么 1.1.1 代码逆向工程和数据逆向工程 1.2 数据解密的方法 1.2.1 黑盒分析法 1.2.2 白盒分析法 1.2.3 黑盒分析法与白盒分析法的比较 1.3 万能的汇编语言 ...
加密技术是最常用的安全保密手段,利用技术手段把重要的数据变为乱码(加密)传送,到达目的地后再用相同或不同的手段还原(解密)。
AES使用java和js互相加解密及前端MD5加密,java后台加密前端js解密,或前端js加密,后端java解密,
【加密解密 技术内幕】 【加密解密 技术内幕】
前端解密解密工具Cryptojs提供了前端加密解密的工作;包括常用的MD5、BASE64、SHA1、AES等加密解密方法。方便无法访问Github的同学下载。附Github地址:https://github.com/brix/crypto-js
《揭秘数据解密的关键技术》是一本以游戏资源文件格式为研究对象的数据逆向工程的技术书籍,主要讲解如何分析和研究自定义文件格式的数据结构。《揭秘数据解密的关键技术》内容包含反汇编的阅读和理解,数据在计算机...
加密解密_技术内幕,详细彻底的为你解析加密解密技术,是一本不可多得的好书
第1章 PE文件格式深入研究第2章 PE分析工具编写第3章 Win32 调试API第4章 Windows下的异常处理
软件加密解密技术内幕下载 软件加密解密技术内幕下载 软件加密解密技术内幕下载 软件加密解密技术内幕下载 chm
JS 前端加密解密 AESCBC模式 引用crypto-js 亲测可用,
客户端⽆埋点监控与性能优化实践 精准化测试的设计与实践详解 技术驱动型团队的组织建设与⾃我成⻓ 极限前端性能优化 基于小程序技术栈的客户端跨平台实践 基于精准测试及图像技术的前端质 基于GLES的三维地图渲染...
由于项目需要,在网上查找了很多资料,整理了一下各种网上的资料,经过一段时间的研究,目前以完成对AES以及RSA的前端JS加密,目前已整理完,特整理一份出来供大家参考。注意:AES用的是CryptoJS库的,而RSA则是用的...
软件加密解密技术内幕
加密解密技术内幕.CHM
股票数据监控器 源码 炒股辅助,e语言编写,能够实时监控股票涨跌,并根据买入价提示盈利
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、...
前端使用jsencrypt加密后端使用java RSA解密功能实现源码