网站监控网页内容监测(阿里UC岳鹰全景监控平台如何设计一个通用、低侵入性、自动上报的页面性能监控方案)

　　网站监控网页内容监测(阿里UC岳鹰全景监控平台如何设计一个通用、低侵入性、自动上报的页面性能监控方案)

　　前言

　　前端页面性能是一个非常核心的用户体验指标。本文介绍了阿里UC月影全景监控平台如何设计一个通用的、低侵入性的、自动化的报表页面性能监控解决方案。使用的主要方法是Navigation Timing API 和sendBeacon。

　　

　　为什么要监控页面性能？

　　页面性能不佳会极大地影响用户体验。如果用户打开页面等待的时间过长，他们可能会直接关闭页面甚至不再使用它。这种情况在移动终端上更为明显，移动终端用户对页面响应延迟的容忍度非常低。

　　虽然页面性能很重要，但在实际使用中，页面性能不佳的情况并不少见。首先，在产品的迭代演进中，页面性能可能会被忽略，性能会随着版本迭代而衰减；其次，性能优化是一件复杂且具有挑战性的事情，需要明确的优化方向和具体的优化方法，才能快速达到效果。

　　所以我们需要一个性能监控系统，对页面的性能进行持续的监控和预警，并在发现瓶颈时指导优化工作。

　　了解Navigation Timing API的性能指标

　　为了帮助开发者更好的衡量和提升前端页面的性能，W3C性能团队引入了Navigation Timing API，实现页面性能的自动化精准管理；开发者可以通过 window.performance 属性来获取。

　　下图是W3C第一版Navigation Timing的处理模型。从当前浏览器窗口卸载旧页面开始，到完成新页面加载，整个过程分为9个小部分：提示卸载旧文档、重定向/卸载、应用缓存、DNS解析、TCP握手、 HTTP请求处理、HTTP响应处理、DOM处理、文档加载完成。将每个小块的开始、结束、中间分为事件，取Unix时间戳，计算两个事件的时间差，从而得到中间过程的时间消耗（精确到毫秒）等级）。

　　

　　W3C 导航计时级别 1()

　　上图为Level 1规格。2012年底进入候选推荐阶段，目前仍在日常使用；但在 W3C 议程上，它已经退却，让位于更高的精度、更强大的功能和更高的级别。Clear Level 2（处理模型如下图所示）。比如独立划分的Resource Timing，可以让我们获取到具体资源的详细耗时信息。

　　

　　W3C Navigation Timing Level 2() 指标解读

　　

　　采集页面性能的关键指标

　　使用上面的指标，我们可以计算出很多重要的指标，比如首字节时间、页面加载时间、dns查找、连接是否安全等。我们对 Navigation Timing API 提供的指标进行分类。根据从上到下的时间流向，右侧的时刻表示每个指标的起点和终点。例如，重定向时间由redirectEnd-redirectStart 计算。，其他类比。

　　

　　确定统计的起点（navigationStart vs fetchStart）

　　页面性能统计的起始时间应该是用户输入URL并按回车后的时间。一个是通过navigationStart获取，相当于在URL输入栏回车或者按F5刷新页面的时间；另一种是通过fetchStart，相当于浏览器准备好使用HTTP请求获取文档的时间。

　　从开发者使用场景的实际分析来看，浏览器重定向和卸载页面的时间消耗对页面加载分析没有太大影响；一般建议使用 fetchStart 作为统计的起点。

　　第一个字节

　　主文档返回第一个字节的时间是页面加载性能的重要指标。对于用户来说，一般是不知道的。对于开发者来说，这意味着访问网络后端的整体响应时间是耗时的。

　　白屏时间

　　用户在页面显示上看到元素的时间。很多人认为白屏时间是页面返回的第一个字节时间，但这其实是不准确的，因为头资源还没有加载完，页面也是白屏。

　　相对而言，“白屏时间”有统计意义的指标可以是domLoading-fetchStart。这时候页面开始解析DOM树，页面上渲染的第一个元素很快就会出现。

　　从W3C Navigation Timing Level 2方案设计，可以直接采用

　　

　　,此时页面资源加载完毕，即将进入渲染过程。

　　首屏时间

　　首屏时间是指页面首屏所有资源全部显示的时间。这对于用户来说是一个非常直接的体验指标，但是对于前端来说，却是一个非常难统计衡量的指标。

　　可以使用具有一定意义的指标，

　　

　　甚至使用

　　

　　，此时页面DOM树已经解析完毕，显示内容。

　　下面是统计页面性能指标的方法。

　　let times = {};

let t = window.performance.timing;

// 优先使用 navigation v2 https://www.w3.org/TR/navigation-timing-2/

if (typeof win.PerformanceNavigationTiming === 'function') {

try {

var nt2Timing = performance.getEntriesByType('navigation')[0]

if (nt2Timing) {

t = nt2Timing

}

} catch (err) {

}

}

//重定向时间

times.redirectTime = t.redirectEnd - t.redirectStart;

//dns查询耗时

times.dnsTime = t.domainLookupEnd - t.domainLookupStart;

//TTFB 读取页面第一个字节的时间

times.ttfbTime = t.responseStart - t.navigationStart;

//DNS 缓存时间

times.appcacheTime = t.domainLookupStart - t.fetchStart;

//卸载页面的时间

times.unloadTime = t.unloadEventEnd - t.unloadEventStart;

//tcp连接耗时

times.tcpTime = t.connectEnd - t.connectStart;

//request请求耗时

times.reqTime = t.responseEnd - t.responseStart;

//解析dom树耗时

times.analysisTime = t.domComplete - t.domInteractive;

//白屏时间

times.blankTime = (t.domInteractive || t.domLoading) - t.fetchStart;

//domReadyTime

times.domReadyTime = t.domContentLoadedEventEnd - t.fetchStart;

　　当SPA流行时

　　Navigation Timing API 可以监控大部分前端页面的性能。但是，随着SPA模型的盛行和vue、reactjs等框架的普及，页面内容渲染的时机发生了变化，W3C标准不能完全满足原本的监控意义。

　　幸运的是，W3C 已经进入了首屏统计的提案阶段。以Chrome为首的浏览器正在打造更能代表用户体验的FP、FCP、FMP指标，并逐渐开放API。

　　

　　用户体验指标的注意事项

　　数据上报方式

　　测量完时间后，需要将数据发送到服务器。页面性能统计对丢失率的要求比较低，应该在尽可能不影响主进程逻辑和页面性能的前提下进行性能统计。

　　用于获取请求的 img 标签

　　var i = new Image();

i.onload = i.onerror = i.onabort = function () {

i = i.onload = i.onerror = i.onabort = null;

}

i.src = url;

　　navigator.sendBeacon

　　大多数现代浏览器都支持 navigator.sendBeacon 方法。这种方式可以用于发送少量的统计和诊断数据，特别适用于需要统计上报的场景。

　　window.addEventListener('unload', logData, false);

function logData() {

navigator.sendBeacon("/log", analyticsData);

}

　　最终计划

　　当浏览器支持sendBeacon方法时，首选此方法，使用img方法降级报告。

　　悦盈-WEB前端监控

　　经过一年左右的不断打磨，阿里UC出品的月影WEB前端监控已经对外开放，欢迎大家免费试用。

　　进行技术交流，第一时间掌握产品动态，欢迎联系我们~