前端性能分析探索-天眼浏览器监控

一、概述

天眼是中国联通IT生产运营支撑平台，对生产运营领域提供端到端、云化架构全层级的运维工具支撑，融合人工智能与大数据技术，实现传统运维向自动化生产、智慧化运营的转变，保障4亿级用户规模系统稳定运行，支撑一体化生产运营体系落地，支持“平台+应用”模式，聚焦集约、赋能省分，助力中国联通IT运营全面数字化转型。

天眼浏览器监控是为解决对一线业务受理情况掌握不足，故障感知和响应滞后的问题，采用JS埋点的方式，采集用户访问过程的性能指标，通过对Ajax请求诊断和页面加载过程的深度挖掘，实现对用户体验的实时跟踪，实现用户操作轨迹精准追踪，页面耗时、JS报错、Ajax时长、弹窗信息一点看全，浏览器、操作系统、地域、内外网多维分析。

二、架构

浏览器监控架构以Java、Flink（高性能流式处理）等为主要计算手段，使用Kafka（消息中间件缓冲）、Logstash（抽取插件）等组件做数据中转，ES（告警数据支撑）、ClickHouse（清单级数据高压缩比存储）、Mysql（关系型，数据统计）等多种存储手段，形成数据的完整处理。支撑上层功能的实现。

三、技术特性

天眼浏览器监控重点监控页面的加载过程和运行时状态，将页面加载性能、运行时异常以及Ajax调用状态和耗时等数据采集上报。之后借助天眼浏览器监控提供的海量数据实时分析和处理服务，对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示，帮助运维人员及时发现并诊断问题。

1、埋点采集方法

浏览器监控主要采集对象是浏览器基本信息、基本日志、错误日志、弹窗日志和Ajax日志进行分析：

（1）基本信息：浏览器、操作系统、员工ID、页面标题、userAgent、页面URL、前端时间等。

（2）错误日志：

监听onerror方法，捕捉JS异常信息数据，组装基本信息进行上报数据。

（3）弹窗日志：

针对弹框中包含的className或者id进行捕捉弹框信息，组装基本信息进行上报数据。

（4）基本日志：

监听页面load、click、keydown、unload、dblclick、focus等方法，捕捉页面点击、加载、离开等事件。组装基本信息上报数据。

针对点击事件采集元素信息
针对加载事件采集首屏、白屏等加载时间
针对离开事件采集响应时长等信息

（5）Ajax日志：

监听Ajax请求，组装接口、基本信息进行上报数据。

2、页面耗时分析

所有网络请求都被视为资源，当它们通过网络检索时，分为不同的生命周期。一个完整的页面请求主要时间段如下

DNS时间：为DNS 域名查询开始的时间到DNS 域名查询完成的时间
- domainLookupStart 记录DNS请求开始时间
- domainLookupEnd记录DNS请求结束的时间

DNS时间=domainLookupEnd - domainLookupStart

TCP时间：为HTTP（TCP）开始建立连接的时间到 HTTP（TCP）完成建立连接的时间
- connectStart 记录开始连接到服务器的时间
- 如果用了TLS或者SSL，secureConnectionStart记录开始连接时间
- connectEnd记录连接完毕时间

TCP时间=connectEnd - connectStart

HTTP传输时间
- requestStart记录请求发生到服务器的时间
- responseStart记录最开始的响应时间
- responseEnd记录响应结束时间

HTTP传输时间=responseEnd- requestStart

DOM建立时间：为HTTP 响应全部接收完成的时间到 DOM 解析完成后，网页内资源加载开始的时间
- domInteractive代表浏览器解析html文档的状态为interactive时的时间节点

DOM建立时间=domInteractive - responseEnd

页面渲染时间：为DOM 解析完成后，网页内资源加载完成的时间（如 JS脚本加载执行完毕），文档的DOMContentLoaded 事件的结束时间到事件的回调函数执行完毕的时间
- loadEventStart代表onload事件触发的时间点
- loadEventEnd代表onload事件结束的时间节点
- domContentLoadedEventEnd代表DOMContentLoaded事件完成的时间节点

页面渲染时间=loadEventStart - domContentLoadedEventEnd

除了上述5个时间段以外，还有业界关注的两个重要指标

白屏时间：从请求开始到浏览器开始解析第一批HTML文档字节的时间差。
首屏时间：首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间

四、核心功能

浏览器监控：针对Web端真实用户体验监控与分析，通过浏览器端的真实用户行为与体验数据监控，提供基于用户感知的业务办理效率分析，基于操作人员感知的操作轨迹跟踪、Ajax请求诊断和页面加载深度分析，实现前端感知可视化

总览页面

用户访问量（uv）、页面访问量（pv）、点击量、IP数。页面性能、弹窗、Ajax、系统访问等总体展现。

（2）页面性能分析

页面性能分析，从网络连接建立到请求响应、加载耗时，全流程解析，瀑布图展示。便于定位哪个环节耗时长，协助从组件架构、前端代码进行优化。

分省、分页面、对不同浏览器、操作系统、内外网、工号，多维度展现，故障判定。

页面弹窗分析

核心报错信息，一点呈现，系统异常波动通过趋势明显展现。

页面Ajax分析

与后端服务关联，反应接口调用耗时。

应用和展望

覆盖cBSS2.0菜单400+，cBSS1.0菜单300+；其他新客服、沃行销等其他院内系统接入中。

前端浏览器监控基于浏览器页面性能指标分析，可有效分析页面瓶颈点，促进系统前端效能提升。后续结合业务数据，数字化手段呈现营业办理时效，分省、分地市、营业厅不同视角展示业务受理情况。反应业务受理量、各类业务办理快慢指标，还原营业员业务办理轨迹、环节耗时。建设总部到省分一线，一点触达的数字化感知监控体系。

前端性能分析探索-天眼浏览器监控相关推荐

前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
前端性能分析工具-Lighthouse
1.前言对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注.同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标.测试前端性能市面上可以用到的工具也比较多,比如可以用 ...
web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
dynaTrace Ajax：前端性能分析利器
什么是 dynaTrace Ajax 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace ...
前端性能分析工具Dyna Trace使用心得（转）
什么是dynatrace ajax "dynatrace ajax 是一个详细的底层追踪工具,它不仅可以显示所有请求和文件在网络中传输的时间,还会记录浏览器render,CPU消耗.JS解析 ...
Ajax 前端性能分析利器：dynaTrace
什么是 dynaTrace Ajax 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace ...
前端性能分析 Chrome Dev Tools 之 Performance
前端性能分析 Chrome Dev Tools 之 Performance 文章目录前端性能分析 Chrome Dev Tools 之 Performance 1. 属性字段 2. 常用性能数据指标 ...
前端性能分析工具：dynaTrace Ajax Edition
从John Resig的Deep Tracing of Internet Explorer了解到了这款刚发布的免费的前端性能分析工具,John Resig对其评价甚高:"I typicall ...
【chrome devtools】前端性能分析之chrome devtools的使用前端项目内存性能优化的建议前端浏览器崩溃卡死前端性能分析实战
最近有个项目,静置一段时间,chrome内存一直上涨.就像是这样: 内存会慢慢悄悄的往上涨,最终可以到达2000多M,直至浏览器崩溃卡死.很明显,这应该是内存泄漏了. 但是只知道内存泄漏,并不知道究竟 ...
前端性能优化 —— 前端性能分析
(点击上方公众号,可快速关注) 作者:ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念,本书前面的部分也多多 ...

前端性能分析探索-天眼浏览器监控

一、概述

前端性能分析探索-天眼浏览器监控相关推荐

最新文章

热门文章