Timestamp ad alta risoluzione per gli eventi

Jacopo Posnick
Jacopo Posnick

La proprietà timeStamp dell'interfaccia Event indica l'ora in cui si è verificato un determinato evento.

Nelle versioni di Chrome precedenti alla 49, questo valore timeStamp era rappresentato come DOMTimeStamp, ossia un numero intero di millisecondi dall'epoca del sistema, proprio come il valore restituito da Date.now().

A partire da Chrome 49, timeStamp è un valore di DOMHighResTimeStamp. Questo valore è ancora un numero di millisecondi, ma con una risoluzione in microsecondi, il valore includerà una componente decimale. Inoltre, anziché il valore relativo all'epoca, il valore è relativo a PerformanceTiming.navigationStart, ovvero il momento in cui l'utente ha raggiunto la pagina.

I vantaggi di una maggiore precisione dei timestamp sono visibili nei seguenti esempi:

Considerazioni su più browser e versioni precedenti

Se disponi di un codice esistente che confronta i valori Event.timeStamp di due eventi, non dovresti modificare il codice a causa del passaggio a DOMHighResTimeStamp. Inoltre, sui browser che supportano DOMHighResTimeStamp, il codice esistente trarrà vantaggio da una maggiore precisione in microsecondi, nonché dal fatto che DOMHighResTimeStamp aumenta monotonicamente, anche se l'orologio di sistema cambia durante l'esecuzione della pagina web.

Se, invece di confrontare due valori Event.timeStamp, è necessario che il codice determini quanto tempo prima che si sia verificato un evento, il nuovo valore DOMHighResTimeStamp può essere confrontato direttamente con performance.now(). E se devi trasformare Event.timeStamp in un numero assoluto di millisecondi dall'epoca del sistema, puoi ottenere questo valore aggiungendo DOMHighResTimeStamp a performance.timing.navigationStart.

In entrambi i casi, DOMTimeStamp e DOMHighResTimeStamp si comportano in modo diverso, ma puoi semplificare il codice cross-browser utilizzando questa funzione di conversione, per gentile concessione di Majid Valipour. Prende un oggetto Event come parametro e restituisce un valore simile a DOMHighResTimeStamp, pronto per essere confrontato con performance.now() o aggiunto a performance.timing.navigationStart.