Performance API в HTML

Мониторинг производительности веб-приложений.

Пример использования:

<script>
// Измерение времени загрузки страницы
window.addEventListener("load", function() {
    const navigationTiming = performance.getEntriesByType("navigation")[0];
    
    const metrics = {
        "DNS lookup": navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
        "TCP handshake": navigationTiming.connectEnd - navigationTiming.connectStart,
        "Request/Response": navigationTiming.responseEnd - navigationTiming.requestStart,
        "DOM processing": navigationTiming.domContentLoadedEventEnd - navigationTiming.domContentLoadedEventStart,
        "Total load time": navigationTiming.loadEventEnd - navigationTiming.navigationStart
    };
    
    console.table(metrics);
    
    // Отображение метрик на странице
    const perfDiv = document.createElement("div");
    perfDiv.innerHTML = "<h3>Метрики производительности:</h3>";
    
    for (const [metric, value] of Object.entries(metrics)) {
        perfDiv.innerHTML += `${metric}: ${value.toFixed(2)}ms<br>`;
    }
    
    document.body.appendChild(perfDiv);
});

// Измерение времени выполнения функции
function measureFunction() {
    performance.mark("start");
    
    // Имитация тяжелой операции
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
        result += Math.sqrt(i);
    }
    
    performance.mark("end");
    performance.measure("heavyCalculation", "start", "end");
    
    const measure = performance.getEntriesByName("heavyCalculation")[0];
    console.log(`Функция выполнилась за ${measure.duration.toFixed(2)}ms`);
    
    // Очистка метрик
    performance.clearMarks();
    performance.clearMeasures();
}

// Запуск измерения
measureFunction();
</script>