如何用Performance API监控网页运行时性能？

window.performance

performance.timing

performance.getEntriesByType('navigation')

PerformanceEntry

domContentLoadedEventEnd

loadEventEnd

// 获取导航性能数据
const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries.length > 0) {
    const navTiming = navigationEntries[0];
    console.log('页面加载完成时间:', navTiming.loadEventEnd - navTiming.startTime, 'ms');
    console.log('DOM内容加载完成时间:', navTiming.domContentLoadedEventEnd - navTiming.startTime, 'ms');
    // 更多指标如 responseEnd, requestStart 等
}

performance.getEntriesByType('resource')

// 获取所有资源加载性能数据
const resourceEntries = performance.getEntriesByType('resource');
resourceEntries.forEach(entry => {
    // 过滤掉一些不重要的或者非HTTP/HTTPS的资源
    if (entry.name.startsWith('http')) {
        console.log(`资源: ${entry.name}, 类型: ${entry.initiatorType}, 加载时间: ${entry.duration.toFixed(2)} ms`);
    }
});

performance.mark()

performance.measure()

User Timing API

// 自定义用户计时
performance.mark('startDataProcessing');
// 假设这里执行了一些数据处理操作
for (let i = 0; i < 1000000; i++) { Math.sqrt(i); }
performance.mark('endDataProcessing');
performance.measure('dataProcessingDuration', 'startDataProcessing', 'endDataProcessing');

// 获取自定义测量结果
performance.getEntriesByName('dataProcessingDuration').forEach(entry => {
    console.log(`自定义测量: ${entry.name}, 持续时间: ${entry.duration.toFixed(2)} ms`);
});

PerformanceObserver

performance.getEntries()

// 监听长任务
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.entryType === 'longtask') {
            console.warn('检测到长任务:', entry.name, '持续时间:', entry.duration.toFixed(2), 'ms', '在', entry.startTime.toFixed(2), 'ms时发生');
            // 可以进一步分析长任务的源头，比如其哪个脚本导致
        }
        // 也可以监听 'paint', 'largest-contentful-paint', 'layout-shift', 'resource', 'navigation' 等
    }
});
observer.observe({ entryTypes: ['longtask', 'paint', 'largest-contentful-paint', 'layout-shift'] });
// 记得在不需要时调用 observer.disconnect() 来停止监听

PerformanceObserver

largest-contentful-paint

PerformanceEntry

longtask

PerformanceObserver

longtask

performance.timing

PerformanceObserver

layout-shift

PerformanceEntry

PerformanceObserver

performance.getEntries()

performance.getEntriesByType()

PerformanceObserver

// 示例：高效监听多种性能指标
const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    // 这里可以对收集到的entries进行批处理、过滤或发送
    console.log('新性能条目:', entries);
    // 假设我们只关心FCP和LCP
    entries.forEach(entry => {
        if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint') {
            console.log('FCP:', entry.startTime.toFixed(2), 'ms');
        } else if (entry.entryType === 'largest-contentful-paint') {
            console.log('LCP:', entry.startTime.toFixed(2), 'ms');
        }
    });
});
observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'longtask', 'resource', 'navigation'] });

PerformanceEntry

requestIdleCallback

requestIdleCallback

setTimeout

let performanceDataBuffer = [];
const sendData = () => {
    if (performanceDataBuffer.length > 0) {
        // 使用 navigator.sendBeacon 发送数据，它在页面卸载时也能发送，且是非阻塞的
        navigator.sendBeacon('/api/performance-report', JSON.stringify(performanceDataBuffer));
        performanceDataBuffer = []; // 清空缓冲区
    }
};

const observer = new PerformanceObserver((list) => {
    performanceDataBuffer.push(...list.getEntries());
    // 考虑在空闲时发送数据
    if ('requestIdleCallback' in window) {
        requestIdleCallback(sendData);
    } else {
        setTimeout(sendData, 2000); // 备用方案，每2秒检查一次
    }
});
observer.observe({ entryTypes: ['paint', 'longtask', 'resource'] });

// 页面卸载前确保发送数据
window.addEventListener('beforeunload', sendData);

PerformanceObserver

observe

entryTypes

resource