PerformanceEntry：entryType 属性

一个字符串。返回值取决于 PerformanceEntry 对象的子类型。某些子类型具有多个 entryType。

element

报告元素的加载时间。

条目实例将是 PerformanceElementTiming 对象。

event

报告事件延迟。

条目实例将是 PerformanceEventTiming 对象。

first-input

报告 首次输入延迟 (FID)。

条目实例将是 PerformanceEventTiming 对象。

largest-contentful-paint

报告元素在屏幕上触发的最大绘制。

条目实例将是 LargestContentfulPaint 对象。

layout-shift

根据页面上元素的移动来报告网页的布局稳定性。

条目实例将是 LayoutShift 对象。

long-animation-frame

报告 长动画帧 (LoAFs) 的实例。

条目实例将是 PerformanceLongAnimationFrameTiming 对象。

longtask

报告长时间任务的实例。

条目实例将是 PerformanceLongTaskTiming 对象。

mark

报告您自己的自定义性能标记。

条目实例将是 PerformanceMark 对象。

measure

报告您自己的自定义性能度量。

条目实例将是 PerformanceMeasure 对象。

navigation

报告文档导航计时。

条目实例将是 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 都提供了允许您直接按类型获取性能条目的方法。您并不一定需要 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"] });

• PerformanceObserver.supportedEntryTypes
• Performance.getEntriesByType()
• PerformanceObserverEntryList.getEntriesByType()