PerformanceEntry

Baseline 已廣泛支援

此功能已成熟，可跨多種裝置和瀏覽器版本使用。自 2017 年 9 月以來，它已在瀏覽器中提供。

注意：此功能在 Web Workers 中可用。

PerformanceEntry 物件封裝了瀏覽器效能時間軸中單個性能指標。

Performance API 提供了內建指標，這些指標是 PerformanceEntry 的專門子類。這包括資源載入、事件計時等的條目。

還可以透過在應用程式的顯式點呼叫 Performance.mark() 或 Performance.measure() 方法來建立效能條目。這允許您將自己的指標新增到效能時間軸中。

PerformanceEntry 例項將始終是以下子類之一

例項屬性

PerformanceEntry.name 只讀: 代表性能條目名稱的字串。值取決於子型別。
PerformanceEntry.entryType 只讀: 代表性能指標型別的字串。例如，當使用 PerformanceMark 時為 "mark"。
PerformanceEntry.startTime 只讀: 代表性能指標開始時間的 DOMHighResTimeStamp。
PerformanceEntry.duration 只讀: 代表性能條目持續時間的 DOMHighResTimeStamp。

例項方法

PerformanceEntry.toJSON(): 返回 PerformanceEntry 物件的 JSON 表示形式。

以下示例建立了 PerformanceMark 和 PerformanceMeasure 型別的 PerformanceEntry 物件。PerformanceMark 和 PerformanceMeasure 子類從 PerformanceEntry 繼承 duration、entryType、name 和 startTime 屬性，並將其設定為適當的值。

// Place at a location in the code that starts login
performance.mark("login-started");

// Place at a location in the code that finishes login
performance.mark("login-finished");

// Measure login duration
performance.measure("login-duration", "login-started", "login-finished");

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"] });