【监控】如何监控资源加载时长

如何监控资源加载时长

相关文章

如何监控资源加载时长

一、使用Performance API

Performance 接口是 Web Performance API 的一部分，它允许开发者访问有关当前页面性能的信息。这些信息包括页面加载时间、资源加载时间、执行时间等。

Performance接口

window.performance对象是Performance API的入口点，它提供了各种方法和属性来测量和记录页面性能数据。
performance.timing属性返回一个包含了从导航开始到各种事件发生的时间戳的对象，可以通过这些时间戳来计算页面各个阶段的性能指标，比如DNS解析时间、TCP连接时间、DOM加载时间等。
performance.now()方法返回一个DOMHighResTimeStamp值，表示从页面加载开始到调用该方法时经过的毫秒数，通常用于测量代码执行时间。

二、监控onload事件之前的所有资源

这段代码会在页面加载完成后，遍历所有的资源（比如图片、样式表、脚本等），并输出它们的加载时间信息到浏览器的控制台中。

// 监听页面加载完成事件
window.addEventListener('load', function() {
    // 页面加载完成后获取所有资源的加载时间
    var resources = window.performance.getEntriesByType('resource');
    resources.forEach(function(resource) {
        console.log('资源类型：', resource.initiatorType);
        console.log('资源名称：', resource.name);
        console.log('加载开始时间：', resource.startTime);
        console.log('加载结束时间：', resource.responseEnd);
        console.log('加载时间：', resource.responseEnd - resource.startTime + 'ms');
    });
});

三、监听onload事件之后的所有资源

这段代码会创建一个PerformanceObserver对象，并使用observer.observe({ entryTypes: [‘resource’] })方法开始监控新资源的加载情况。当有新资源加载时，会触发回调函数，并输出资源的加载时间信息到控制台中。

// 创建一个新的PerformanceObserver对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有新加载的资源
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('新资源加载：', entry.name);
        console.log('加载时间：', entry.duration + 'ms');
    });
});

// 监听资源加载的性能条目
observer.observe({ entryTypes: ['resource'] });

// 一段时间后停止观察，以免无限输出
setTimeout(function() {
    observer.disconnect();
}, 60000); // 观察1分钟

四、其他entryTypes

navigation：用于观察导航相关的性能条目，比如页面加载、重定向等。

// 创建一个新的 PerformanceObserver 对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有导航相关的性能条目
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('导航类型：', entry.entryType);
        console.log('导航开始时间：', entry.startTime);
        console.log('重定向时间：', entry.redirectEnd - entry.redirectStart);
        console.log('DNS 解析时间：', entry.domainLookupEnd - entry.domainLookupStart);
        console.log('TCP 连接时间：', entry.connectEnd - entry.connectStart);
        console.log('服务器响应时间：', entry.responseStart - entry.requestStart);
        console.log('DOM 加载时间：', entry.domContentLoadedEventStart - entry.startTime);
        console.log('页面加载时间：', entry.loadEventStart - entry.startTime);
    });
});

// 监听导航性能的性能条目
observer.observe({ entryTypes: ['navigation'] });

paint：用于观察绘制相关的性能条目，比如首次绘制时间、首次内容绘制时间等。

// 创建一个新的 PerformanceObserver 对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有绘制相关的性能条目
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('绘制类型：', entry.entryType);
        console.log('绘制开始时间：', entry.startTime);
        console.log('绘制持续时间：', entry.duration);
    });
});

// 监听绘制性能的性能条目
observer.observe({ entryTypes: ['paint'] });

longtask：用于观察长任务相关的性能条目，比如 JavaScript 主线程上超过 50 毫秒的任务。

// 创建一个新的 PerformanceObserver 对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有长任务相关的性能条目
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('长任务类型：', entry.entryType);
        console.log('长任务开始时间：', entry.startTime);
        console.log('长任务持续时间：', entry.duration);
    });
});

// 监听长任务性能的性能条目
observer.observe({ entryTypes: ['longtask'] });

largest-contentful-paint：用于观察最大内容渲染时间，即页面上最大的可见内容绘制的时间。

// 创建一个新的 PerformanceObserver 对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有最大内容渲染时间相关的性能条目
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('最大内容渲染时间类型：', entry.entryType);
        console.log('最大内容渲染时间：', entry.startTime);
    });
});

// 监听最大内容渲染时间性能的性能条目
observer.observe({ entryTypes: ['largest-contentful-paint'] });

element：用于观察特定元素的性能条目，比如通过 PerformanceElementTiming 接口获取特定元素的加载时间等。

// 创建一个新的 PerformanceObserver 对象
var observer = new PerformanceObserver(function(list) {
    // 获取所有特定元素的性能条目
    var entries = list.getEntries();
    entries.forEach(function(entry) {
        console.log('元素ID：', entry.identifier);
        console.log('元素加载开始时间：', entry.startTime);
        console.log('元素加载结束时间：', entry.loadTime);
    });
});

// 监听特定元素的性能条目
observer.observe({ type: 'element', buffered: true });