PerformanceEntry: startTime property

A DOMHighResTimeStamp representing the first timestamp when the PerformanceEntry was created.

The meaning of this property depends on the value of this performance entry's entryType:

element

Either the value of this entry's renderTime if it is not 0, otherwise the value of this entry's loadTime.

event

The time the event was created, i.e. the event's timeStamp property.

first-input

The time the first input event was created, i.e. that event's timeStamp.

largest-contentful-paint

The value of this entry's renderTime if it is not 0, otherwise the value of this entry's loadTime.

layout-shift

The time when the layout shift started.

longtask

The time when the task started.

mark

The time at which the mark was created by a call to performance.mark().

measure

The time at which the measure was created by a call to performance.measure().

navigation

Always 0.

paint

The time when the paint occurred.

resource

The value of this entry's fetchStart property.

taskattribution

Always 0.

visibility-state

The time when the visibility state change occurred.

The following example shows the use of the startTime property which you can log during performance observation.

Note: The performance.mark() method allows you to set your own startTime, and the performance.measure() method allows to set the start of the measure.

performance.mark("my-mark");
performance.mark("my-other-mark", { startTime: 12.5 });

loginButton.addEventListener("click", (clickEvent) => {
  performance.measure("login-click", { start: clickEvent.timeStamp });
});

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });