PerformanceEntry: entryType 属性

值

字符串。返回值取决于 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 对象。

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 都提供允许您直接按类型获取性能条目 (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"] });

规范

浏览器兼容性

另见

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