사용자 사용 시간 기록 및 측정은 대부분의 최신 브라우저에서 사용할 수 있는 성능 관련 기능입니다. 이러한 기능을 통해 사용자가 웹 페이지 또는 앱을 어떻게 사용하는지에 대한 데이터를 수집하여 웹사이트 성능을 최적화.
사용자 타이밍 마크는 코드의 특정 지점을 표시하는 데 사용되며, 표시된 지점의 실행 시간은 사용자 타이밍 측정 도구를 통해 측정할 수 있습니다. 이를 통해 코드의 병목 현상이 발생하는 위치를 파악할 수 있습니다. 예를 들어, 사용자 타이밍 마크를 사용하여 JavaScript 파일의 시작 부분을 표시한 다음, 사용자 타이밍 측정 도구를 사용하여 해당 파일이 로드되는 데 걸린 시간을 확인할 수 있습니다.
데 걸린 시간을 확인할 수 있습니다 AJAX 요청이 완료되는
에서 확인할 수 있습니다 W3C 웹사이트.
사용자 타이밍 마크란 무엇인가요?
사용자 타이밍 마크와 사용자 타이밍 측정값은 웹 애플리케이션의 문제를 파악하고 최적화하는 데 사용할 수 있는 성능 지표입니다. 사용자 타이밍 마크는 두 이벤트 사이의 시간 간격 또는 이벤트 완료 시간을 측정할 수 있습니다. 사용자 타이밍 측정값은 이벤트 지속 시간 또는 특정 기간 동안 발생하는 이벤트 수를 측정할 수 있습니다.
사용자 타이밍 마크를 추가하는 방법은 무엇인가요?
사용자 타이밍 마크와 측정값을 추가하는 것은 웹 페이지 성능에 대한 통찰력을 얻는 좋은 방법입니다. 사용자 타이밍을 통해 사용자가 버튼이나 링크를 클릭하는 등 페이지에서 특정 이벤트가 발생하는 데 걸리는 시간을 추적할 수 있습니다.
사용자 지정 타이밍 마크와 측정값을 추가하려면 먼저 새 JavaScript 파일을 만들어야 합니다. 그런 다음 해당 파일에 다음 코드를 포함해야 합니다
var startTime = Date.now();
함수 doSomething() {
var endTime = Date.now();
var timeTaken = endTime – startTime;
console.log('doSomething 함수가 실행되는 데 ' + timeTaken + 'ms가 걸렸습니다.');
}
위 코드를 사용하면 특정 함수가 실행되는 데 걸리는 시간을 추적할 수 있습니다. 이 기법을 사용하여 페이지의 다른 이벤트도 추적할 수 있습니다. 그러려면 위 코드에서 함수 이름을 추적하려는 이벤트 이름으로 바꾸세요.
코드에서 시간을 표시하는 팁
1. 코드 실행에 걸리는 시간을 측정하려면 `performance.now() ` 메서드를 사용할 수 있습니다. 이 메서드는 밀리초의 1/1000 단위까지 정확한 타임스탬프를 제공합니다.
2. 높은 정밀도가 필요하지 않은 경우 Date.now() 메서드를 사용할 수도 있습니다.
3. 어떤 작업에 걸리는 시간을 특정 단위(예: 초, 분 등)로 측정하려면 performance.mark() 및 performance.measure() 메서드를 사용할 수 있습니다.
4. 마지막으로, 코드에서 무슨 일이 일어나고 있는지, 그리고 각 부분이 실행되는 데 얼마나 시간이 걸렸는지 자세히 알고 싶다면 사용자 타이밍 API의 mark() 및 measure() 메서드를 사용할 수 있습니다.
결론
사용자 타이밍 API는 사용자가 웹 애플리케이션과 상호 작용하는 방식을 파악하는 데 매우 유용한 도구입니다. 마크와 측정값을 활용하여 특정 이벤트와 타이밍 정보를 추적하고 병목 현상이나 문제가 발생할 수 있는 지점을 찾아낼 수 있습니다. 또한, 사용자 타이밍 API를 통해 성능 데이터를 수집하여 전반적인 사용자 경험을 개선할 수 있습니다.
