PerformanceEntry: entryType 屬性
注意：此功能在 Web Workers 中可用。
只讀的 entryType 屬性返回一個字串，表示此條目代表的效能指標的型別。
所有支援的 entryTypes 都可以透過靜態屬性 PerformanceObserver.supportedEntryTypes 訪問。
值
字串。返回值取決於 PerformanceEntry 物件的子型別。某些子型別有多個 entryType。
element-
報告元素的載入時間。
條目例項將是
PerformanceElementTiming物件。 event-
報告事件延遲。
條目例項將是
PerformanceEventTiming物件。 first-input-
報告首次輸入延遲 (FID)。
條目例項將是
PerformanceEventTiming物件。 largest-contentful-paint-
報告元素在螢幕上觸發的最大繪製。
條目例項將是
LargestContentfulPaint物件。 layout-shift-
根據頁面上元素的移動來報告網頁的佈局穩定性。
條目例項將是
LayoutShift物件。 long-animation-frame-
報告長動畫幀 (LoAF) 的例項。
條目例項將是
PerformanceLongAnimationFrameTiming物件。 longtask-
報告長任務的例項。
條目例項將是
PerformanceLongTaskTiming物件。 mark-
報告您自己的自定義效能標記。
條目例項將是
PerformanceMark物件。 measure-
報告您自己的自定義效能測量。
條目例項將是
PerformanceMeasure物件。 -
報告文件導航計時。
條目例項將是
PerformanceNavigationTiming物件。 paint-
報告頁面載入期間文件渲染的關鍵時刻（首次繪製、首次有內容繪製）。
條目例項將是
PerformancePaintTiming物件。 resource-
報告文件中資源的計時資訊。
條目例項將是
PerformanceResourceTiming物件。 taskattribution-
報告對長任務有顯著貢獻的工作型別。
條目例項將是
TaskAttributionTiming物件。 visibility-state-
報告頁面可見性狀態更改的計時，即標籤頁從前臺變為後臺或反之亦然。
條目例項將是
VisibilityStateEntry物件。
示例
按型別過濾效能條目
entryType 屬性在過濾特定效能條目時可能很有用。例如，您可能想檢查所有指令碼資源，因此您會檢查 entryType 是否為 "resource" 並且 initiatorType 是否為 "script"。
const scriptResources = performance
.getEntries()
.filter(
(entry) =>
entry.entryType === "resource" && entry.initiatorType === "script",
);
console.log(scriptResources);
按型別獲取效能條目
Performance 和 PerformanceObserver 都提供允許您直接按型別獲取效能條目 (performance entries) 的方法。您不一定需要 entryType 屬性來實現此目的，而是可以使用 Performance.getEntriesByType() 或 PerformanceObserverEntryList.getEntriesByType()。
此外，在使用 PerformanceObserver 進行觀察時，observe() 方法在其選項物件中接受一個 entryTypes 陣列，您可以在其中決定要觀察的條目型別。
// Log all resource entries at this point
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
console.log(`${entry.name}'s duration: ${entry.duration}`);
});
// PerformanceObserver version
// Log all resource entries when they are available
function perfObserver(list, observer) {
list.getEntriesByType("resource").forEach((entry) => {
console.log(`${entry.name}'s duration: ${entry.duration}`);
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["resource", "navigation"] });
規範
| 規範 |
|---|
| 效能時間線 # dom-performanceentry-entrytype |
瀏覽器相容性
載入中…