Hochauflösende Zeitstempel für Ereignisse

Jan Posnick
Jeff Posnick

Das Attribut timeStamp der Event-Oberfläche gibt den Zeitpunkt an, zu dem ein bestimmtes Ereignis stattgefunden hat.

In Chrome-Versionen vor 49 wurde dieser timeStamp-Wert als DOMTimeStamp dargestellt, was einer ganzen Anzahl von Millisekunden seit der Systemepoche entspricht, ähnlich wie der von Date.now() zurückgegebene Wert.

Ab Chrome 49 ist timeStamp ein DOMHighResTimeStamp-Wert. Dieser Wert ist immer noch eine Anzahl von Millisekunden, allerdings mit Mikrosekundenauflösung, d. h., der Wert enthält eine Dezimalkomponente. Außerdem ist der Wert nicht relativ zur Epoche, sondern relativ zum PerformanceTiming.navigationStart, also zur Zeit, zu der der Nutzer die Seite aufgerufen hat.

Die Vorteile der zusätzlichen Zeitstempelgenauigkeit zeigen sich in den folgenden Beispielen:

Browserübergreifende und Legacy-Überlegungen

Wenn Sie bereits Code haben, der Event.timeStamp-Werte aus zwei Ereignissen vergleicht, sollten Sie den Code bei der Verlagerung auf DOMHighResTimeStamp nicht anpassen müssen. Bei Browsern, die DOMHighResTimeStamp unterstützen, profitiert Ihr vorhandener Code außerdem von der höheren Mikrosekundengenauigkeit. Außerdem profitiert Ihr vorhandener Code von der Tatsache, dass DOMHighResTimeStamp garantiert monoton zunimmt, unabhängig davon, ob sich die Systemuhr während der Ausführung der Webseite ändert.

Wenn der Code nicht zwei Event.timeStamp-Werte vergleichen muss, sondern ermitteln muss, wie lange ein Ereignis zurückliegt, kann der neue DOMHighResTimeStamp-Wert direkt mit performance.now() verglichen werden. Wenn Sie Event.timeStamp in eine absolute Zahl von Millisekunden seit der Systemepoche umwandeln müssen, können Sie diesen Wert erhalten, indem Sie DOMHighResTimeStamp zu performance.timing.navigationStart hinzufügen.

In beiden Fällen verhalten sich DOMTimeStamp und DOMHighResTimeStamp unterschiedlich, aber Sie können Ihren browserübergreifenden Code vereinfachen, indem Sie diese Konvertierungsfunktion mit freundlicher Genehmigung von Majid Valipour verwenden. Sie verwendet ein Event-Objekt als Parameter und gibt einen DOMHighResTimeStamp-ähnlichen Wert zurück, der mit performance.now() verglichen oder zu performance.timing.navigationStart hinzugefügt werden kann.