[JavsScript] Performance 객체를 이용한 성능 측정 방법

 

 

 

자바스크립트의 Navigation Timeing API을 통하여 

 

Performance객체 이용하여 성능을 측정하는 코드를 소개해보려합니다.

 

Navigation Timing API란 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다.

 

 

 

제가 준비한 성능 측정 항목입니다.

 

• 전체 소요시간     
• 요청 소요 시간
• 응답 데이터를 모두 받은 시간
• 서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간
• 리소스 로딩 시간 출력 (단위: 밀리초)
• 리소스 크기 출력 (단위: MB)

 

 

 

실무에서 자주 사용하는 코드이니 도움이 되었으면 좋겠습니다.

 

 

 

 

 

 

[JavsScript] Performance 객체를 이용한 성능 측정 방법

 

 

 

$(function(){ 
    var ntime = performance.timing;
        
    var total = ntime.loadEventEnd - ntime.navigationStart; // 전체 소요시간
    var request = ntime.responseStart - ntime.requestStart; // 요청 소요 시간
    var response = ntime.responseEnd - ntime.responseStart; // 응답 데이터를 모두 받은 시간
    var pageEnd = ntime.loadEventEnd - ntime.responseEnd;  // 서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간
        
    console.log("total : " + total + "ms  >>>>>>>  전체 소요시간");
    console.log("request : " + request + "ms  >>>>>>>  요청 소요 시간");
    console.log("response : " + response + "ms  >>>>>>>  첫 응답으로 부터 응답 데이터를 모두 받은 시간");
    console.log("pageEnd : " + pageEnd + "ms  >>>>>>>  서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간");
 
 
 
    // PerformanceResourceTiming 객체 얻기
    const resourceTimings = window.performance.getEntriesByType("resource");
 
    // 초기값 설정
    let totalSizeInBytes = 0;
    let totalTimeInMilliseconds = 0;
 
    // 각 리소스의 로딩 시간과 크기 계산
    resourceTimings.forEach(resource => {
        totalSizeInBytes += resource.transferSize;
        totalTimeInMilliseconds += resource.duration;
    });
 
    // 리소스 크기를 메가바이트(MB) 단위로 변환
    const totalSizeInMB = totalSizeInBytes / (1024 * 1024);
 
    // 리소스 로딩 시간 출력 (단위: 밀리초)
    console.log("총 리소스 로딩 시간: " + totalTimeInMilliseconds.toFixed(2) + " ms");
 
    // 리소스 크기 출력 (단위: MB)
    console.log("총 리소스 크기: " + totalSizeInMB.toFixed(2) + " MB");
});
 

 

 

변수 ntime에 performance.timing을 선언한 다음

 

안에 내장되어 있는 함수들을 통해 필요한 정보를 추출합니다.

 

 

만약 시간이 마이너스로 표시가 될 경우 캐싱메모리로 인한 현상이니 

 

아래의 코드처럼 setTimeout을 이용하여 로드를 늦게해주면 제대로 작동이 될것입니다.

 

 

 

 

 

$(function(){ 
    setTimeout(function() {
                
        var ntime = performance.timing;
        
        var total = ntime.loadEventEnd - ntime.navigationStart; //전체 소요시간
        var request = ntime.responseStart - ntime.requestStart; // 요청 소요 시간
        var response = ntime.responseEnd - ntime.responseStart; // 응답 데이터를 모두 받은 시간
        var pageEnd = ntime.loadEventEnd - ntime.responseEnd; //  서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간
            
        console.log("total : " + total + "ms  >>>>>>>  전체 소요시간");
        console.log("request : " + request + "ms  >>>>>>>  요청 소요 시간");
        console.log("response : " + response + "ms  >>>>>>>  첫 응답으로 부터 응답 데이터를 모두 받은 시간");
        console.log("pageEnd : " + pageEnd + "ms  >>>>>>>  서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간");
 
 
 
        // PerformanceResourceTiming 객체 얻기
        const resourceTimings = window.performance.getEntriesByType("resource");
 
        // 초기값 설정
        let totalSizeInBytes = 0;
        let totalTimeInMilliseconds = 0;
 
        // 각 리소스의 로딩 시간과 크기 계산
        resourceTimings.forEach(resource => {
            totalSizeInBytes += resource.transferSize;
            totalTimeInMilliseconds += resource.duration;
        });
 
        // 리소스 크기를 메가바이트(MB) 단위로 변환
        const totalSizeInMB = totalSizeInBytes / (1024 * 1024);
 
        // 리소스 로딩 시간 출력 (단위: 밀리초)
        console.log("총 리소스 로딩 시간: " + totalTimeInMilliseconds.toFixed(2) + " ms");
 
        // 리소스 크기 출력 (단위: MB)
        console.log("총 리소스 크기: " + totalSizeInMB.toFixed(2) + " MB");
 
        
    }, 2000);
});