当前位置：首页 > news >正文

前端监控与埋点

news 来源：原创 2025/5/19 18:08:57

一、概念

前端埋点是指在网页或者应用程序中插入特定的代码，用于收集用户的行为数据并发送给服务器进行分析。这些数据可以包括用户的点击、浏览、输入等操作，帮助开发者了解用户在其网站中的行为，从而进行针对性的优化和改进。

前端埋点通常包括以下几个步骤：

1、定义事件：定义需要收集的数据事件，如点击、浏览等。

2、添加代码：在网页或应用程序中添加特定的代码，用于收集事件数据。

3、发送数据：将收集到的数据发送给服务器进行分析。

4、分析数据：对收集到的数据进行分析和挖掘，找出用户行为规律和需求，为产品的改进和优化提供数据。

二、前端监控

（一）常见的监控

1、数据监控（主要关注用户在网站或应用中的行为和交互）

PV：即页面浏览量或点击量
UV：指访问某个站点或点击某条新闻的不同IP地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为

2、性能监控（主要关注网站或应用的加载速度、响应时间和用户体验等方面）

不同用户，不同机型和不同系统下的首屏加载时间
白屏时间
http等请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间

3、异常监控（主要关注网站或应用在运行过程中是否出现错误或异常）

JavaScript的异常监控
样式丢失的异常监控

（二）性能数据

unload：前一个页面卸载耗时。计算方式：unloadEventEnd - unloadEventStart
redirect：重定向耗时。计算方式：redirectEnd-redirectStart。意义：重定向时间。
appCache：缓存耗时。domainLookupStart - fetchStart。意义：读取缓存的时间。
dns：DNS解析耗时。domainLoopupEnd - domainLookupStart。意义：观察域名解析服务是否正常。
tcp：TCP连接耗时。connectEnd - connectStart。意义：建立连接的耗时。
sst：SSL安全连接耗时。connectEnd - secureConnectStart。意义：反映数据安全连接建立耗时。
response：响应数据传输耗时。responseEnd - responseStart。意义：观察网络是否正常。
dom：DOM解析耗时，domInteractive - responseEnd。意义：观察DOM结构是否合理，是否有JS阻塞页面解析
dcl：DOMContentLoaded事件耗时，domContentLoadedEventEnd - domContentLoadedEventStart。意义：当HTML文档被完全加载和解析之后，DOMContentLoaded事件被触发，无需等待样式表、图像的完成加载。
resources：资源加载耗时。domComplete - domContentLoadedEventEnd。意义：可以观察文档浏览是否过大。
domReady：DOM阶段渲染耗时。domContentLoadedEventEnd - fetchStart。意义：DOM树和页面加载完成时间，会触发domContentLoaded时间。
首次渲染耗时：responsedEnd - fetchStart。加载文档到看到第一帧非空图像的时间（白屏时间）
首次可交互时间：domInteractive - fetchStart。DOM树解析完成时间，此时document.readyStart为interactive
首包时间耗时：responseStart - domainLookupStart。DNS解析到响应返回给浏览器第一个字节的时间。
页面完全加载时间：loadEventStart - fetchStart
onLoad：onLoad事件耗时。loadEventEnd - loadEventStart。