一文彻底知道前端监控

发布时间：2022-07-06 15:28:43 所属栏目：安全来源：互联网

导读：一、前端监控现状近年来，前端监控是越来越火，目前已经有很多成熟的产品供我们选择使用，如下图所示 3.1 采集前端监控的第一个步骤就是数据采集，采集的信息包含环境信息、性能信息、异常信息、业务信息。 3.1.1 环境信息环境信息是每个监控系统必备的内

　　一、前端监控现状

　　近年来，前端监控是越来越火，目前已经有很多成熟的产品供我们选择使用，如下图所示

　　3.1 采集

　　前端监控的第一个步骤就是数据采集，采集的信息包含环境信息、性能信息、异常信息、业务信息。

　　3.1.1 环境信息

　　环境信息是每个监控系统必备的内容，毕竟排查问题的时候需要知道来自哪个页面、浏览器是谁、操作用户是谁……,这样才能快速定位问题，解决问题。一般这些常见的环境信息主要包含：

　　url：正在监控的页面，该页面可能会出现性能、异常问题。获取方式为：
　　window.location.href

　　ua:访问该页面时该用户的userAgent信息，包含操作系统和浏览器的类型、版本等。获取方式为：
　　window.navigator.userAgent

　　token：记录当前用户是谁。通过记录该用户是谁。
　　一方面方便将该用户的所有监控信息建立联系，方便数据分析;

　　另一方面通过该标识可以查看该用户的所有操作，方便复现问题。

　　3.1.2 性能信息

　　页面的性能直接影响了用户留存率，，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。所以我们的追求就是提高页面的性能，为了提高性能需要监控哪些指标呢?

　　3.1.2.1 指标分类

　　指标有很多，我总结为以下两个方面：网络层面和页面展示层面。

　　一、网络层面

　　从网络层面来看涉及的指标有：重定向耗时、DNS解析耗时、TCP连接耗时、SSL耗时、TTFB网络请求耗时、数据传输耗时、资源加载耗时……,各个指标的解释如下表所示：

　　

　　指标解释
　　重定向耗时重定向所耗费的时间
　　DNS解析耗时浏览器输入网址后首先会进行DNS解析，其可以对服务器是否工作作出反馈
　　TCP连接耗时指建立连接过程的耗时

　　各个指标的解释如下表所示。

　　

　　指标解释
　　FP（First Paint）首次绘制，标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
　　FCP（First Contentful Paint）首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素.
　　LCP（Largest Contentful Paint）最大内容渲染，表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
　　FMP（First Meaningful Paint）首次有效绘制，表示页面的“主要内容”开始出现在屏幕上的时间点。它是我们测量用户加载体验的主要指标。
　　DCL（DomContentLoaded）当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载.
　　L（onLoad）当依赖的资源全部加载完毕之后才会触发
　　TTI（Time to Interactive）可交互时间，用于标记应用已进入视觉渲染并能可靠响应用户输入的时间点
　　FID（First Input Delay）首次输入延迟，用户首次和页面交互（单击链接、点击按钮等）到页面响应交互的时间
　　3.1.2.2 指标求解

　　上述这么多指标该怎么获取呢?浏览器给我们留了相应的接口——神奇的window.performance，通过该接口可以获取一些列与性能相关的参数，下面以https://baidu.com 为例来看一下与这些指标相关的参数：

　　window.performance中的timing属性中的内容不就是为了求解上述指标所需要的值吗?看着上面的属性值再对应下面的performance访问流程图，整个过程是不是一目了然。

　　有了上面的值我们就一起求解上述的指标：

　　一、网络层面

　　

　　指标计算
　　重定向耗时 redirectEnd - redirectStart
　　SSL连接耗时 connectEnd - secureConnectionStart
　　TTFB 网络请求耗时 responseStart - requestStart
　　数据传输耗时 responseEnd - responseStart
　　资源加载耗时 loadEventStart - domContentLoadedEventEnd
　　二、页面展示层面

　　Google工程师一直在推动以用户为中心的性能指标，所以页面展示层面的变化较大，求解方式稍有不同：

　　1.FP和FCP

　　通过window.performance.getEntriesByType(‘paint’)的方式获取

　　

　　复制
　　const paint = window.performance.getEntriesByType('paint');
　　const FP = paint[0].startTime,
　　const FCP = paint[1].startTime,
　　1.
　　2.
　　3.
　　2.LCP

　　

　　复制
　　function getLCP() {
　　    // 增加一个性能条目的观察者
　　    new PerformanceObserver((entryList, observer) => {
　　        let entries = entryList.getEntries();
　　        const lastEntry = entries[entries.length - 1];
　　        observer.disconnect();
　　        console.log('LCP', lastEntry.renderTime || lastEntry.loadTime);
　　    }).observe({entryTypes: ['largest-contentful-paint']});
　　}

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

促进网络安全科普共筑	开源软件安全度走向成
首席信息安全官依然会	如何创建有弹性的网络