Event
인터페이스의 timeStamp
속성은 지정된 이벤트가 발생한 시간을 나타냅니다.
Chrome 49 이전의 버전에서는 이 timeStamp
값이 DOMTimeStamp
로 표시되었으며 이는 Date.now()
에서 반환된 값과 매우 흡사하게 시스템 에포크 이후의 정수 밀리초 단위입니다.
Chrome 49부터 timeStamp
는 DOMHighResTimeStamp
값입니다. 이 값은 여전히 밀리초 단위이지만 마이크로초 해상도를 사용하면 값에 십진수 구성요소가 포함됩니다. 또한 값은 에포크를 기준으로 하는 대신 PerformanceTiming.navigationStart
, 즉 사용자가 페이지로 이동한 시간을 기준으로 합니다.
다음 예에서 추가 타임스탬프 정확성의 이점을 확인할 수 있습니다.
교차 브라우저 및 레거시 고려사항
두 이벤트의 Event.timeStamp
값을 비교하는 기존 코드가 있는 경우 DOMHighResTimeStamp
로의 이동을 고려하여 코드를 조정하지 않아도 됩니다. 또한 DOMHighResTimeStamp
를 지원하는 브라우저에서는 웹페이지 실행 도중에 시스템 시계가 변경되는지에 관계없이 기존 코드의 마이크로초 정확도 향상과 DOMHighResTimeStamp
가 단조롭게 증가한다는 이점이 있습니다.
두 Event.timeStamp
값을 비교하는 대신 코드에서 이벤트가 얼마나 오래 전에 발생했는지 확인해야 하는 경우 새로운 DOMHighResTimeStamp
값을 performance.now()
와 직접 비교할 수 있습니다.
또한 Event.timeStamp
를 시스템 에포크 이후의 절댓값 밀리초로 변환해야 하는 경우 performance.timing.navigationStart
에 DOMHighResTimeStamp
를 추가하여 해당 값을 가져올 수 있습니다.
두 경우 모두 DOMTimeStamp
와 DOMHighResTimeStamp
가 다르게 작동하지만 마지드 발리푸르의 예에 따라 이 변환 함수를 사용하여 브라우저 간 코드를 단순화할 수 있습니다. 이 메서드는 Event
객체를 매개변수로 사용하고 DOMHighResTimeStamp
와 유사한 값을 반환하여 performance.now()
와 비교하거나 performance.timing.navigationStart
에 추가할 수 있도록 합니다.