引言
在现代的Web应用开发中,前端监控成为了一个重要的环节。通过监控用户在使用过程中的性能指标,开发人员可以及时发现并解决潜在的性能问题,提升用户体验。而前端监控SDK作为一种常用的工具,可以帮助开发人员收集和分析性能指标数据。本文将详细介绍前端监控SDK中常见的性能指标及其相关内容。
实现
-
页面加载时间
: 页面加载时间是指从用户请求页面到页面完全加载完成所需的时间。通过测量页面加载时间,我们可以了解到用户在访问网站时所面临的等待时间,并根据结果进行优化。常见的测量方式包括使用Performance API中的timing对象来获取关键事件(如DOMContentLoaded和load)之间的时间差。 -
资源加载时间
: 资源加载时间是指网页中各个资源(如图片、CSS、JavaScript文件等)从开始加载到加载完成所需的时间。通过监控资源加载时间,我们可以了解到哪些资源对页面性能有影响,并进行相应优化。常见的测量方式包括使用Performance API中的getEntriesByType方法来获取各个资源加载完成所需的时间。
export function timing() {
let FMP, LCP
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries()
FMP = perfEntries[0]
observer.disconnect()
}).observe({ entryTypes: ['element'] })
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries()
LCP = perfEntries[0]
observer.disconnect()
}).observe({ entryTypes: ['largest-contentful-paint'] })
new PerformanceObserver((entryList, observer) => {
let lastEvent = getLastEvent()
let firstInput = entryList.getEntries()[0]
if (firstInput) {
let inputDelay = firstInput.processingStart - firstInput.startTime
let duration = firstInput.duration // 处理耗时
if (inputDelay > 0 || duration > 0) {
tracker.send({
kind: 'experience',
type: 'firstInputDelay',
inputDelay,
duration,
startTime: firstInput.startTime,
selector: lastEvent
? getSelector(lastEvent.path || lastEvent.target)
: ''
})
}
}
observer.disconnect()
}).observe({ type: 'first-input', buffered: true })
onload(function () {
setTimeout(() => {
const {
connectEnd,
connectStart,
domContentLoadedEventEnd,
domContentLoadedEventStart,
domInteractive,
domLoading,
fetchStart,
loadEventEnd,
loadEventStart,
requestStart,
responseEnd,
responseStart
} = performance.timing
tracker.send({
kind: 'experience',
type: 'timing',
connectTime: connectEnd - connectStart, // 连接时间
ttfbTime: responseStart - requestStart, // 首字节到达时间
responseTime: responseEnd - responseStart, // 响应读取时间
parseDOMTime: loadEventStart - domLoading, // DOM解析时间
domContentLoadedTime:
domContentLoadedEventEnd - domContentLoadedEventStart, //
timeToInteractive: domInteractive - fetchStart, // 首次可交互时间
loadTime: loadEventEnd - fetchStart // 完整的加载时间
})
let FP = performance.getEntriesByName('first-paint')[0]
let FCP = performance.getEntriesByName('first-contentful-paint')[0]
tracker.send({
kind: 'experience',
type: 'paint',
firstPaint: FP.startTime,
firstContentfulPaint: FCP.startTime,
firstMeaningfulPaint: FMP ? FMP.startTime : '',
largestContentfulPaint: LCP.startTime
})
}, 2000)
})
}
这段代码是一个用于性能监测的函数。它使用了Performance API来获取页面加载和用户交互的各个阶段的性能指标,并将这些指标发送给一个名为”tracker”的监测器。
首先,代码定义了两个变量FMP和LCP,用于存储页面的首次有意义绘制(First Meaningful Paint)和最大内容绘制(Largest Contentful Paint)的性能指标。
然后,代码创建了三个PerformanceObserver对象,分别用于监听页面元素加载、最大内容绘制和首次输入延迟事件。当这些事件发生时,回调函数会将相应的性能指标存储到FMP、LCP以及tracker中,并断开观察器。
接下来,在页面加载完成后,代码使用setTimeout函数延迟2秒执行一段逻辑。在这段逻辑中,代码通过performance.timing对象获取了页面加载过程中各个阶段的时间戳,并将这些时间戳计算得到的性能指标发送给tracker。
最后,代码使用performance.getEntriesByName方法获取了首次绘制(First Paint)和首次有意义绘制(First Contentful Paint)的性能指标,并将它们发送给tracker。
总结起来,这段代码通过Performance API获取了页面加载和用户交互过程中的各个阶段的性能指标,并将这些指标发送给一个监测器。
onload.js
一个用于在页面加载完成后执行回调函数的函数。它通过检查 document.readyState
属性来确定页面是否已经完全加载。
export default function (callback) {
if (document.readyState === 'complete') {
callback()
} else {
window.addEventListener('load', callback)
}
}
通过判断 document.readyState
是否等于 ‘complete’ 来确定页面是否已经完全加载。
- 如果页面已经完全加载,则直接执行回调函数。
- 如果页面还未完全加载,则使用
window.addEventListener
方法监听 ‘load’ 事件,并在事件触发时执行回调函数。 这样,无论是在页面已经完全加载时还是在页面加载完成后,都能确保回调函数被执行。
上述所用到的getLastEvent、getStackLines、getSelector可看前端监控sdk开发(二)js错误捕获
总结
前端监控SDK中的性能指标对于优化Web应用性能至关重要。通过监控页面加载时间、资源加载时间、错误率、用户交互时间以及页面性能评分等指标,开发人员可以及时发现并解决潜在问题,提升用户体验。
原文链接:https://juejin.cn/post/7315244098491645961 作者:俊刚