【监控】性能监控有哪些指标

性能监控有哪些指标

相关文章

性能监控有哪些指标

一、页面加载时间（Page Load Time）：

页面加载时间是指从用户发起页面请求到页面完全加载完成并可交互的时间。通常包括页面的网络请求、资源加载、DOM 解析、CSS 样式计算、JavaScript 执行等过程。

// 页面加载完成时的时间戳
const loadEndTime = performance.now();

// 计算页面加载时间（以毫秒为单位）
const pageLoadTime = loadEndTime - performance.timing.navigationStart;

console.log("页面加载时间（Page Load Time）: " + pageLoadTime + " 毫秒");

在这个例子中，我们使用了 performance.now() 方法来获取当前时间戳，然后通过减去页面的导航开始时间（performance.timing.navigationStart）来计算页面加载时间。

二、首屏加载时间（First Contentful Paint，FCP）：

首屏加载时间是指页面首次开始渲染内容的时间点，用户可以看到页面上有意义的内容的时间。

// 获取页面上的所有资源
const resources = window.performance.getEntriesByType("resource");

// 计算首屏加载时间（以毫秒为单位）
let firstPaintTime = Infinity;
resources.forEach(resource => {
    if (resource.initiatorType === "navigation" && resource.responseStart < firstPaintTime) {
        firstPaintTime = resource.responseStart;
    }
});

// 获取 DOMContentLoaded 事件触发时的时间戳
const domContentLoadedTime = performance.timing.domContentLoadedEventEnd;

// 计算首屏加载时间
const firstScreenLoadTime = domContentLoadedTime - firstPaintTime;

console.log("首屏加载时间: " + firstScreenLoadTime + " 毫秒");

在这个例子中，我们首先使用 window.performance.getEntriesByType(“resource”) 方法获取页面上所有资源的信息。然后，我们遍历资源列表，找到页面初始导航的资源，并获取最早开始加载的时间戳。接着，我们获取 DOMContentLoaded 事件触发时的时间戳，并通过将其与首个资源开始加载的时间戳进行比较，来计算首屏加载时间。

三、DOM 完全加载时间（DOMContentLoaded Time）：

DOMContentLoaded 时间表示当 HTML 文档被完全加载和解析完成时的时间点。在这个时间点之后，页面的 DOM 结构已经可以访问和操作。

// 当 DOMContentLoaded 事件触发时的时间戳
const domContentLoadedTime = performance.timing.domContentLoadedEventEnd;

// 计算 DOM 完全加载时间（以毫秒为单位）
const domCompleteLoadTime = domContentLoadedTime - performance.timing.navigationStart;

console.log("DOM 完全加载时间: " + domCompleteLoadTime + " 毫秒");

在这个例子中，我们使用了 performance.timing.domContentLoadedEventEnd 属性来获取 DOMContentLoaded 事件触发时的时间戳。然后通过减去页面的导航开始时间（performance.timing.navigationStart）来计算 DOM 完全加载时间。

四、页面渲染时间（Page Rendering Time）：

页面渲染时间是指页面内容被完全渲染完成的时间点，包括 DOM 树构建完成、CSS 样式计算完成、布局完成和绘制完成等。

// 当 load 事件触发时的时间戳
const loadTime = performance.timing.loadEventEnd;

// 当 DOMContentLoaded 事件触发时的时间戳
const domContentLoadedTime = performance.timing.domContentLoadedEventEnd;

// 计算页面渲染时间（以毫秒为单位）
const renderTime = loadTime - domContentLoadedTime;

console.log("页面渲染时间: " + renderTime + " 毫秒");

在这个例子中，我们使用了 performance.timing.loadEventEnd 属性来获取页面加载完成时的时间戳，以及 performance.timing.domContentLoadedEventEnd 属性来获取 DOMContentLoaded 事件触发时的时间戳。然后通过两者的差值来计算页面渲染时间。

五、页面交互时间（Time to Interactive，TTI）：

页面交互时间是指页面完全加载并且可以响应用户交互的时间点，即页面加载完成后用户可以进行操作的时间。

// 当页面加载完成时的时间戳
const loadTime = performance.timing.loadEventEnd;

// 当 DOMContentLoaded 事件触发时的时间戳
const domContentLoadedTime = performance.timing.domContentLoadedEventEnd;

// 计算页面交互时间（以毫秒为单位）
const interactionTime = loadTime - domContentLoadedTime;

console.log("页面交互时间: " + interactionTime + " 毫秒");

六、资源加载时间（Resource Load Time）：

资源加载时间是指各种资源（如图片、样式表、JavaScript 文件等）的加载时间，包括资源发起请求到资源下载完成的时间。

// 获取所有资源的信息
const resources = window.performance.getEntriesByType("resource");

// 遍历资源信息，计算资源加载时间
resources.forEach(resource => {
    console.log("资源类型：" + resource.initiatorType);
    console.log("资源名称：" + resource.name);
    console.log("资源加载时间：" + (resource.responseEnd - resource.startTime) + " 毫秒");
});

在这个例子中，我们使用了 window.performance.getEntriesByType(“resource”) 方法获取了页面加载过程中所有资源的信息，包括图片、样式表、JavaScript 文件等。然后遍历资源信息，通过计算每个资源的加载时间来获取资源加载时间。

七、白屏时间（White Screen Time）：

白屏时间是指页面加载过程中，浏览器展示空白页面的时间，即用户看到空白页面到页面开始渲染内容的时间间隔。

// 当 DOMContentLoaded 事件触发时的时间戳
const domContentLoadedTime = performance.timing.domContentLoadedEventEnd;

// 当文档解析完成并且首个 CSS 文件已经加载完成时的时间戳
const firstCssLoadedTime = performance.timing.domContentLoadedEventEnd;

// 计算白屏时间（以毫秒为单位）
const whiteScreenTime = firstCssLoadedTime - domContentLoadedTime;

console.log("白屏时间: " + whiteScreenTime + " 毫秒");

在这个例子中，我们使用了 performance.timing.domContentLoadedEventEnd 属性来获取 DOMContentLoaded 事件触发时的时间戳，以及 performance.timing.domContentLoadedEventEnd 属性来获取文档解析完成并且首个 CSS 文件已经加载完成时的时间戳。然后通过两者的差值来计算白屏时间。

八、错误率（Error Rate）：

错误率指的是页面加载过程中出现的 JavaScript 错误、资源加载失败、HTTP 错误等问题的比率，可以用来评估页面的稳定性和可靠性。

// 获取页面上的错误数量
const errorCount = window.performance.getEntriesByType("resource").filter(resource => resource.initiatorType === "error").length;

// 获取页面上的总请求数量
const totalRequests = window.performance.getEntriesByType("resource").length;

// 计算错误率
const errorRate = (errorCount / totalRequests) * 100;

console.log("错误率: " + errorRate + "%");

在这个例子中，我们首先使用 window.performance.getEntriesByType(“resource”) 方法获取页面上所有资源的信息，然后通过过滤器找到所有类型为 “error” 的资源，以获取错误数量。接着，我们获取页面上的总请求数量。最后，我们通过将错误数量除以总的请求次数，并乘以 100，来计算错误率。

九、页面大小（Page Size）：

页面大小是指页面所包含的所有资源的总大小，包括 HTML、CSS、JavaScript、图片等文件大小。

// 获取页面上的所有资源
const resources = window.performance.getEntriesByType("resource");

// 计算页面大小（以字节为单位）
let pageSize = 0;
resources.forEach(resource => {
    pageSize += resource.transferSize;
});

console.log("页面大小: " + pageSize + " 字节");

在这个例子中，我们使用了 window.performance.getEntriesByType(“resource”) 方法获取页面上所有资源的信息。然后，我们遍历资源列表，并将每个资源的传输大小（transferSize）相加，以计算页面大小。

十、资源大小（Resource Size）：

资源大小是指单个资源（如图片、样式表、JavaScript 文件等）的大小，通过评估资源大小可以优化页面加载速度和性能。

// 获取页面上的所有资源
const resources = window.performance.getEntriesByType("resource");

// 打印每个资源的大小
resources.forEach(resource => {
    console.log("资源名称: " + resource.name);
    console.log("资源大小: " + resource.transferSize + " 字节");
});