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

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

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

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

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

교차 브라우저 및 레거시 고려사항

두 이벤트의 Event.timeStamp 값을 비교하는 기존 코드가 있는 경우 DOMHighResTimeStamp로의 이동을 고려하여 코드를 조정하지 않아도 됩니다. 또한 DOMHighResTimeStamp를 지원하는 브라우저에서는 웹페이지 실행 도중에 시스템 시계가 변경되는지에 관계없이 기존 코드의 마이크로초 정확도 향상과 DOMHighResTimeStamp단조롭게 증가한다는 이점이 있습니다.

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

두 경우 모두 DOMTimeStampDOMHighResTimeStamp가 다르게 작동하지만 마지드 발리푸르의 예에 따라 이 변환 함수를 사용하여 브라우저 간 코드를 단순화할 수 있습니다. 이 메서드는 Event 객체를 매개변수로 사용하고 DOMHighResTimeStamp와 유사한 값을 반환하여 performance.now()와 비교하거나 performance.timing.navigationStart에 추가할 수 있도록 합니다.