引言
在现代的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 作者：俊刚
