자바스크립트 "Performance API"

Performance API는 개발자가 웹 애플리케이션의 성능을 측정할 수 있도록 하는 웹 API 세트입니다. 웹 페이지를 로드하는 데 걸리는 시간, 개별 리소스를 로드하는 데 걸리는 시간, JavaScript를 실행하는 데 걸리는 시간을 측정하는 방법을 제공합니다.

​

다음은 JavaScript에서 Performance API를 사용하는 몇 가지 샘플입니다.

​

1. 페이지 로드 시간 측정

​

웹 페이지를 로드하는 데 걸리는 시간을 측정하려면 `performance.timing` 개체를 사용할 수 있습니다. 이 개체는 페이지 로드 프로세스에 대한 일련의 타이밍 정보를 제공합니다.

​

// Measure page load time

const loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;

console.log(`Page loaded in ${loadTime} milliseconds`);

​

2. 리소스 로드 시간 측정

​

개별 리소스를 로드하는 데 걸리는 시간을 측정하려면 `performance.getEntriesByType('resource')` 메서드를 사용할 수 있습니다. 이 메서드는 타이밍 정보와 함께 페이지에 로드된 모든 리소스의 배열을 반환합니다.

​

// Measure resource load time

const resources = performance.getEntriesByType('resource');

resources.forEach((resource) => {

console.log(`${resource.name} loaded in ${resource.duration} milliseconds`);

});

​

3. JavaScript 실행 시간 측정

​

JavaScript가 실행되는 데 걸리는 시간을 측정하려면 `performance.now()` 메서드를 사용할 수 있습니다. 이 메서드는 코드 블록의 기간을 측정하는 데 사용할 수 있는 고해상도 타임스탬프를 반환합니다.

​

// Measure JavaScript execution time

const start = performance.now();

​

// Run some code here...

​

const end = performance.now();

const duration = end - start;

console.log(`Code execution time: ${duration} milliseconds`);

​

전반적으로 Performance API는 웹 애플리케이션의 성능을 측정하기 위한 강력한 도구 세트를 제공합니다. 이러한 API를 사용하면 성능 병목 현상을 식별하고 코드를 최적화하여 더 나은 사용자 경험을 제공할 수 있습니다.