Viewing: developer.mozilla.org

API Date.now() performance.now() PerformanceObserver API

performance.mark() PerformanceMark name 1

// 
performance.mark("login-started");

// 
performance.mark("login-finished");

name mark() detail startTime startTime 12.5 HTML detail

performance.mark("login-started", {
  startTime: 12.5,
  detail: { htmlElement: myElement.id },
});

Performance.measure() PerformanceMeasure name start end 2 "login-duration"

duration

const loginMeasure = performance.measure(
  "login-duration",
  "login-started",
  "login-finished",
);

console.log(loginMeasure.duration);

Performance.measure() detail

click event.timestamp UI "login-finished"

loginButton.addEventListener("click", (clickEvent) => {
  fetch(loginURL).then((data) => {
    renderLoggedInUser(data);

    const marker = performance.mark("login-finished");

    performance.measure("login-click", {
      detail: { htmlElement: myElement.id },
      start: clickEvent.timeStamp,
      end: marker.startTime,
    });
  });
});

PerformanceObserver

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

PerformanceObserver

Performance 3

: PerformanceObserver

performance.getEntries()

const entries = performance.getEntries();
entries.forEach((entry) => {
  if (entry.entryType === "mark") {
    console.log(`${entry.name}  startTime: ${entry.startTime}`);
  }
  if (entry.entryType === "measure") {
    console.log(`${entry.name}  duration: ${entry.duration}`);
  }
});

performance.getEntriesByType(entryType)

const marks = performance.getEntriesByType("mark");
marks.forEach((entry) => {
  console.log(`${entry.name}  startTime: ${entry.startTime}`);
});

const measures = performance.getEntriesByType("measure");
measures.forEach((entry) => {
  console.log(`${entry.name}  duration: ${entry.duration}`);
});

performance.getEntriesByName(name, entryType)

// Log all marks named "debug-marks"
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}  startTime: ${entry.startTime}`);
});

// 
performance.clearMarks();

// "myMarker" 
performance.clearMarks("myMarker");

// 
performance.clearMeasures();

// "myMeasure" 
performance.clearMeasures("myMeasure");

MDN

MDN 2026819

GitHub