Marcas de tiempo de alta resolución para eventos

La propiedad timeStamp de la interfaz Event indica la hora a la que se produjo un evento determinado.

En las versiones de Chrome anteriores a la 49, este valor timeStamp se representaba como DOMTimeStamp, que era un número entero de milisegundos desde la época del sistema, al igual que el valor que muestra Date.now().

A partir de Chrome 49, timeStamp es un valor DOMHighResTimeStamp. Este valor sigue siendo un número de milisegundos, pero con resolución de microsegundos, lo que significa que el valor incluirá un componente decimal. Además, en lugar de que el valor sea relativo a la época, el valor es relativo a PerformanceTiming.navigationStart, es decir, la hora a la que el usuario navegó a la página.

Los beneficios de la precisión adicional de la marca de tiempo se pueden ver en los siguientes ejemplos:

Consideraciones heredadas y en varios navegadores

Si tienes código existente que compara valores de Event.timeStamp de dos eventos, no deberías tener que ajustar tu código debido al cambio a DOMHighResTimeStamp. Además, en navegadores compatibles con DOMHighResTimeStamp, tu código existente se beneficiará de una mayor precisión de microsegundos y del hecho de que se garantiza que DOMHighResTimeStamp aumente de forma monotónica, independientemente de si el reloj del sistema cambia en medio de la ejecución de tu página web.

Si, en lugar de comparar dos valores de Event.timeStamp, tu código necesita determinar hace cuánto tiempo ocurrió un evento, se puede comparar el nuevo valor DOMHighResTimeStamp directamente con performance.now(). Si necesitas transformar Event.timeStamp en una cantidad absoluta de milisegundos desde el ciclo de entrenamiento del sistema, puedes obtener ese valor agregando DOMHighResTimeStamp a performance.timing.navigationStart.

En ambos casos, DOMTimeStamp y DOMHighResTimeStamp se comportan de manera diferente, pero puedes simplificar el código en varios navegadores con esta función de conversión, cortesía de Majid Valipour. Toma un objeto Event como parámetro y muestra un valor similar a DOMHighResTimeStamp, listo para compararse con performance.now() o agregarse a performance.timing.navigationStart.