페이지 로드 시간을 측정

1. 타이밍 정확성: performance.now()를 사용하여 더 정확한 타이밍을 제공하지만, 페이지 로드 시작 시간을 performance.timing.navigationStart로 설정하는 것도 고려해볼 수 있습니다. 이렇게 하면 페이지 로드 시작 시점과의 차이를 더 정확하게 측정할 수 있습니다.
2. 비동기 리소스 로드: 페이지 로드 후에도 비동기로 로드되는 리소스가 있을 수 있습니다. 이를 고려하여 load 이벤트 외에도 DOMContentLoaded 이벤트를 추가로 측정할 수 있습니다.
3. 에러 처리: 현재 코드는 에러 처리가 없습니다. 예를 들어, performance.timing이 지원되지 않는 브라우저에서의 예외 처리를 추가할 수 있습니다.
4. 사용자 정의 이벤트: 페이지 로드 시간 외에도 특정 이벤트(예: 이미지 로드 완료, 특정 스크립트 로드 완료 등)를 측정하고 싶다면 사용자 정의 이벤트를 추가할 수 있습니다.

// sfPageMetrics 클래스 정의
class sfPageMetrics {
    // 생성자 함수: 페이지 로드 시작 시간을 설정합니다.
    constructor() {
        // 페이지 로드 시작 시간을 performance.timing.navigationStart로 설정합니다.
        this.startTime = performance.timing.navigationStart;
        this.endTime = null; // 페이지 로드 종료 시간을 저장할 변수입니다.
    }

    // 페이지 로드 시간을 측정하는 함수
    measureLoadTime() {
        // 'load' 이벤트 리스너를 추가합니다. 페이지가 완전히 로드되면 실행됩니다.
        window.addEventListener('load', () => {
            // 페이지 로드 종료 시간을 performance.now()로 설정합니다.
            this.endTime = performance.now();
            // 페이지 로드 시간을 계산합니다.
            const loadTime = this.endTime - this.startTime;
            // 페이지 로드 시간을 <div id="result"></div>에 출력합니다.
            document.getElementById('result').innerText = `페이지 로드 시간: ${loadTime.toFixed(2)}ms`;
        });

        // 'DOMContentLoaded' 이벤트 리스너를 추가합니다. DOM 콘텐츠가 로드되면 실행됩니다.
        document.addEventListener('DOMContentLoaded', () => {
            // DOM 콘텐츠 로드 시간을 계산합니다.
            const domContentLoadedTime = performance.now() - this.startTime;
            // DOM 콘텐츠 로드 시간을 <div id="result"></div>에 출력합니다.
            document.getElementById('result').innerText += `\nDOM 콘텐츠 로드 시간: ${domContentLoadedTime.toFixed(2)}ms`;
        });
    }

    // Performance API 지원 여부를 확인하는 정적 메서드
    static isPerformanceSupported() {
        // performance 및 performance.timing 객체가 존재하는지 확인합니다.
        return !!(performance && performance.timing);
    }
}

// 사용 예시
// Performance API를 지원하는지 확인합니다.
if (sfPageMetrics.isPerformanceSupported()) {
    // sfPageMetrics 인스턴스를 생성합니다.
    const pageMetrics = new sfPageMetrics();
    // 페이지 로드 시간을 측정합니다.
    pageMetrics.measureLoadTime();
} else {
    // Performance API를 지원하지 않는 브라우저일 경우 메시지를 출력합니다.
    document.getElementById('result').innerText = 'Performance API를 지원하지 않는 브라우저입니다.';
}

 

현재 코드와 접근 방식의 한계점은 다음과 같습니다:

1. 비동기 로드: 페이지 로드 후에도 비동기로 로드되는 리소스가 있을 수 있습니다. 예를 들어, 이미지나 스크립트가 비동기로 로드되면 load 이벤트가 발생한 후에도 추가적인 로드 시간이 필요할 수 있습니다. 이 경우, 실제 사용자 경험과 측정된 로드 시간 사이에 차이가 발생할 수 있습니다.
2. 브라우저 호환성: performance.timing과 performance.now()는 대부분의 최신 브라우저에서 지원되지만, 일부 구형 브라우저에서는 지원되지 않을 수 있습니다. 이로 인해 모든 사용자에게 일관된 결과를 제공하지 못할 수 있습니다.
3. 정확한 타이밍 측정: performance.timing.navigationStart와 performance.now()를 사용하여 타이밍을 측정하지만, 브라우저의 내부 구현에 따라 약간의 오차가 발생할 수 있습니다. 특히, 매우 짧은 시간 간격을 측정할 때 이러한 오차가 더 두드러질 수 있습니다.
4. 사용자 정의 이벤트: 현재 코드는 페이지 로드 시간과 DOM 콘텐츠 로드 시간만 측정합니다. 특정 이벤트(예: 특정 이미지 로드 완료, 특정 스크립트 로드 완료 등)를 측정하려면 추가적인 코드가 필요합니다.
5. 단일 페이지 애플리케이션(SPA): 단일 페이지 애플리케이션에서는 페이지가 완전히 새로고침되지 않고 콘텐츠가 동적으로 로드됩니다. 이 경우, load 이벤트와 DOMContentLoaded 이벤트가 적절한 타이밍을 제공하지 않을 수 있습니다. SPA의 경우, 라우팅 이벤트나 특정 컴포넌트의 로드 시간을 측정하는 방법을 고려해야 합니다.