이벤트용 고해상도 타임스탬프

제프 포스닉
제프 포스닉

Event 인터페이스의 timeStamp 속성은 지정된 이벤트가 발생한 시간을 나타냅니다.

49 이전 버전의 Chrome에서는 이 timeStamp 값이 DOMTimeStamp로 표시되었으며, 이는 Date.now()에서 반환된 값과 매우 유사하며 시스템 에포크 이후의 정수 밀리초 수였습니다.

Chrome 49부터는 timeStampDOMHighResTimeStamp 값입니다. 이 값은 여전히 밀리초 단위이지만 분해능이 마이크로초이므로 값에 소수 구성요소가 포함됩니다. 또한 이 값은 에포크를 기준으로 하는 대신 PerformanceTiming.navigationStart(사용자가 페이지로 이동한 시간)을 기준으로 합니다.

추가 타임스탬프 정확성의 이점은 다음 예에서 확인할 수 있습니다.

교차 브라우저 및 기존 고려사항

두 이벤트의 Event.timeStamp 값을 비교하는 기존 코드가 있는 경우 DOMHighResTimeStamp으로의 이동을 고려하여 코드를 조정할 필요가 없습니다. 또한 DOMHighResTimeStamp을 지원하는 브라우저에서는 기존 코드가 마이크로초 정확도 향상의 이점을 누릴 수 있으며, 웹페이지 실행 중에 시스템 시계가 변경되더라도 DOMHighResTimeStamp단조적으로 증가한다는 점이 보장됩니다.

두 개의 Event.timeStamp 값을 비교하는 대신 코드에서 이벤트가 얼마나 오래전에 발생했는지 확인해야 하는 경우 새 DOMHighResTimeStamp 값을 performance.now()와 직접 비교할 수 있습니다. 시스템 에포크 이후 Event.timeStamp를 절대 밀리초 단위 숫자로 변환해야 하는 경우 DOMHighResTimeStampperformance.timing.navigationStart에 추가하여 이 값을 가져올 수 있습니다.

두 경우 모두 DOMTimeStampDOMHighResTimeStamp가 다르게 동작하지만, Majid Valipour에서 제공하는 이 전환 함수를 사용하여 교차 브라우저 코드를 단순화할 수 있습니다. 이 메서드는 Event 객체를 매개변수로 사용하고 DOMHighResTimeStamp와 유사한 값을 반환하며, 이 값은 performance.now()와 비교하거나 performance.timing.navigationStart에 추가할 수 있습니다.