브라우저의 페이지 로딩 시간 계산을 위한 BOM 사용법

13 Oct 2023

웹 애플리케이션을 개발하다 보면 페이지의 로딩 시간을 측정해야 할 때가 있습니다. 이를 위해 브라우저의 BOM(Browser Object Model)을 사용할 수 있습니다. BOM을 사용하면 페이지 로딩에 걸리는 시간을 측정하고, 성능 향상을 위한 개선 작업을 할 수 있습니다.

1. Performance 타이밍 API를 사용하여 로딩 시간 측정

먼저, Performance 타이밍 API를 사용하여 페이지 로딩 시간을 측정하는 방법을 알아보겠습니다. Performance 타이밍 API는 페이지 로딩과 관련된 타이밍 정보를 제공해줍니다.

// 페이지 로딩 시작 시간
const startTime = window.performance.timing.navigationStart;

// 페이지 로딩 완료 시간
const endTime = window.performance.timing.loadEventEnd;

// 페이지 로딩 시간 계산
const pageLoadTime = endTime - startTime;

console.log(`페이지 로딩 시간: ${pageLoadTime}ms`);

위 코드에서, window.performance.timing.navigationStart는 페이지의 네비게이션 시작 시간을 나타내며, window.performance.timing.loadEventEnd는 페이지의 로딩이 완료된 시간을 나타냅니다. 이를 이용하여 페이지 로딩 시간을 계산하고 콘솔에 출력할 수 있습니다.

2. 네트워크 타이밍 정보를 사용하여 로딩 시간 측정

네트워크 타이밍 정보를 사용하여 페이지 로딩 시간을 측정하는 방법도 있습니다. window.performance.timing 객체의 다양한 속성을 이용하여 네트워크 타이밍 정보에 접근할 수 있습니다.

// 네트워크 타이밍 정보
const networkTiming = window.performance.timing;

// DNS 조회 시간
const dnsTime = networkTiming.domainLookupEnd - networkTiming.domainLookupStart;

// 서버 연결 시간
const serverConnectTime = networkTiming.connectEnd - networkTiming.connectStart;

// 리소스 로드 시간
const resourceLoadTime = networkTiming.responseEnd - networkTiming.requestStart;

console.log(`DNS 조회 시간: ${dnsTime}ms`);
console.log(`서버 연결 시간: ${serverConnectTime}ms`);
console.log(`리소스 로드 시간: ${resourceLoadTime}ms`);

위 코드에서 window.performance.timing 객체의 속성들을 이용하여 네트워크 타이밍 정보를 가져올 수 있습니다. 이를 이용하여 DNS 조회 시간, 서버 연결 시간, 리소스 로드 시간을 측정하고 콘솔에 출력할 수 있습니다.

요약

이번 글에서는 브라우저의 BOM을 사용하여 페이지 로딩 시간을 측정하는 방법을 알아보았습니다. Performance 타이밍 API와 네트워크 타이밍 정보를 이용하여 페이지 로딩 시간을 측정할 수 있으며, 이를 통해 웹 애플리케이션의 성능을 개선하는 작업을 할 수 있습니다.

더 자세한 내용은 다음의 참고 자료를 참고하시기 바랍니다.