PerformanceEntry: name 属性

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

PerformanceEntry 接口的只读 name 属性是一个字符串，表示性能条目的名称。它充当标识符，但不必是唯一的。该值取决于子类。

值

一个字符串。该值取决于 PerformanceEntry 对象的子类，如以下表格所示。

子类 值
LargestContentfulPaint 始终返回空字符串。
LayoutShift 始终返回 "layout-shift"。
PerformanceElementTiming 以下字符串之一
  • "image-paint"
  • "text-paint"
PerformanceEventTiming 关联事件的类型。
PerformanceLongTaskTiming 以下字符串之一
  • "cross-origin-ancestor"
  • "cross-origin-descendant"
  • "cross-origin-unreachable"
  • "multiple-contexts"
  • "same-origin-ancestor"
  • "same-origin-descendant"
  • "same-origin"
  • "self"
  • "unknown"
PerformanceMark 通过调用 performance.mark() 创建标记时使用的名称。
PerformanceMeasure 通过调用 performance.measure() 创建度量时使用的名称。
PerformanceNavigationTiming 请求资源的已解析 URL。即使请求被重定向，此值也不会改变。
PerformancePaintTiming 以下字符串之一
  • "first-paint"
  • "first-contentful-paint"
PerformanceResourceTiming 请求资源的已解析 URL。即使请求被重定向，此值也不会改变。
TaskAttributionTiming 始终返回 "unknown"。
VisibilityStateEntry 以下字符串之一
  • "visible"
  • "hidden"

示例

按名称筛选性能条目

当 PerformanceEntry 是 PerformanceResourceTiming 对象时，name 属性指的是请求资源的已解析 URL。在这种情况下，name 属性可以用于筛选出特定资源，例如所有 SVG 图片。

js
// Log durations of SVG resources
performance.getEntriesByType("resource").forEach((entry) => {
  if (entry.name.endsWith(".svg")) {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

按名称获取性能条目

Performance 和 PerformanceObserver 都提供了允许您直接按名称获取性能条目的方法。您不一定需要 name 属性，而是可以使用 Performance.getEntriesByName() 或 PerformanceObserverEntryList.getEntriesByName()。

js
// Log all marks named "debug-marks" at this point in time
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

// PerformanceObserver version
// Log all marks named "debug-marks" when they happen
function perfObserver(list, observer) {
  list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

规范

规范
性能时间线
# dom-performanceentry-name

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅