Tijdstempels met hoge resolutie voor evenementen

De eigenschap timeStamp van de Event interface geeft het tijdstip aan waarop een bepaalde gebeurtenis plaatsvond.

In versies van Chrome vóór 49 werd deze timeStamp waarde weergegeven als een DOMTimeStamp , wat een geheel aantal milliseconden was sinds het systeem epoch , vergelijkbaar met de waarde die werd geretourneerd door Date.now() .

Vanaf Chrome 49 is timeStamp een DOMHighResTimeStamp waarde. Deze waarde bedraagt ​​nog steeds een aantal milliseconden, maar met een resolutie van microseconden, wat betekent dat de waarde een decimale component bevat. Bovendien is de waarde, in plaats van dat de waarde relatief is ten opzichte van het tijdperk, relatief ten opzichte van PerformanceTiming.navigationStart , dwz het tijdstip waarop de gebruiker naar de pagina heeft genavigeerd.

De voordelen van extra nauwkeurigheid van de tijdstempel zijn te zien in deze voorbeelden:

Overwegingen voor meerdere browsers en oudere versies

Als u bestaande code heeft die Event.timeStamp waarden van twee gebeurtenissen vergelijkt, hoeft u uw code niet aan te passen vanwege de verschuiving naar DOMHighResTimeStamp . Bovendien profiteert uw bestaande code in browsers die DOMHighResTimeStamp ondersteunen van de grotere nauwkeurigheid op microseconden, evenals van het feit dat de DOMHighResTimeStamp gegarandeerd monotoon toeneemt , ongeacht of de systeemklok verandert midden in de uitvoering van uw webpagina.

Als uw code, in plaats van twee Event.timeStamp waarden te vergelijken, moet bepalen hoe lang geleden een gebeurtenis heeft plaatsgevonden, kan de nieuwe DOMHighResTimeStamp waarde rechtstreeks worden vergeleken met performance.now() . En als u Event.timeStamp moet transformeren naar een absoluut aantal milliseconden sinds het systeemtijdperk, kunt u die waarde verkrijgen door een DOMHighResTimeStamp toe te voegen aan performance.timing.navigationStart .

In beide gevallen gedragen DOMTimeStamp en DOMHighResTimeStamp zich anders, maar u kunt uw cross-browsercode vereenvoudigen door deze conversiefunctie te gebruiken, met dank aan Majid Valipour . Het neemt een Event object als parameter en retourneert een DOMHighResTimeStamp -achtige waarde, klaar om te worden vergeleken met performance.now() of toegevoegd aan performance.timing.navigationStart .