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

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

49 이전 버전의 Chrome에서는 이 timeStamp 값이 Date.now()에서 반환한 값과 마찬가지로 시스템 에포크 이후의 전체 밀리초 값인 DOMTimeStamp로 표시되었습니다.

Chrome 49부터 timeStampDOMHighResTimeStamp 값입니다. 이 값은 여전히 밀리초 단위이지만 마이크로초 해상도를 갖습니다. 즉, 값에 소수 자릿수가 포함됩니다. 또한 이 값은 시대에 상대되는 대신 PerformanceTiming.navigationStart, 즉 사용자가 페이지로 이동한 시간에 상대적입니다.

타임스탬프 정확성을 높이면 다음과 같은 이점이 있습니다.

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

두 이벤트의 Event.timeStamp 값을 비교하는 기존 코드가 있는 경우 DOMHighResTimeStamp로의 전환으로 인해 코드를 조정할 필요가 없습니다. 또한 DOMHighResTimeStamp를 지원하는 브라우저에서는 기존 코드가 마이크로초 정확성 향상과 더불어 웹페이지 실행 중에 시스템 시계가 변경되는지와 관계없이 DOMHighResTimeStamp단조롭게 증가한다는 사실의 이점을 누릴 수 있습니다.

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

두 경우 모두 DOMTimeStampDOMHighResTimeStamp는 다르게 동작하지만 Majid Valipour의 이 변환 함수를 사용하여 교차 브라우저 코드를 간소화할 수 있습니다. Event 객체를 매개변수로 사용하고 performance.now()와 비교하거나 performance.timing.navigationStart에 추가할 준비가 된 DOMHighResTimeStamp 유형의 값을 반환합니다.