PerformanceResourceTiming：initiatorType 属性

基线广泛可用

此功能已经完善，可以在许多设备和浏览器版本上使用。它从以下时间开始在浏览器中可用 2017 年 9 月.

initiatorType 只读属性是一个字符串，代表启动资源加载的 Web 平台功能。

注意： 此属性不代表获取的内容类型。.css 文件可以通过 <link> 元素获取，导致 initiatorType 为 link。当使用 CSS 文件中的 background: url() 加载图像时，initiatorType 将为 css，而不是 img。

值

initiatorType 属性可以具有以下值，或者如果都不匹配则为 other。

音频: 如果请求是由 <audio> 元素的 src 属性启动的。
信标: 如果请求是由 navigator.sendBeacon() 方法启动的。
身体: 如果请求是由 <body> 元素的 background 属性启动的。
CSS: 如果请求是由 CSS url() 函数启动的。
早期提示: 如果请求是由 103 Early Hint 响应启动的。
嵌入: 如果请求是由 <embed> 元素的 src 属性启动的。
提取: 如果请求是由 fetch() 方法启动的。
框架: 如果请求是由加载 <frame> 元素启动的。
内联框架: 如果请求是由 <iframe> 元素的 src 属性启动的。
icon 非标准: 如果请求是由网站图标启动的。非标准，仅由 Safari 报告。
图像: 如果请求是由 <image> 元素启动的。
图片: 如果请求是由 <img> 元素的 src 或 srcset 属性启动的。
输入: 如果请求是由类型为 image 的 <input> 元素启动的。
链接: 如果请求是由 <link> 元素启动的。
导航: 如果请求是由导航请求启动的。
对象: 如果请求是由 <object> 元素启动的。
ping: 如果请求是由 <a> 元素的 ping 启动的。
脚本: 如果请求是由 <script> 元素启动的。
跟踪: 如果请求是由 <track> 元素的 src 启动的。
视频: 如果请求是由 <video> 元素的 poster 或 src 启动的。
XMLHttpRequest: 如果请求是由 XMLHttpRequest 启动的。

示例

筛选资源

initiatorType 属性可用于仅获取特定资源计时条目。例如，仅获取由 <script> 元素启动的条目。

使用 PerformanceObserver 的示例，它会在浏览器性能时间轴中记录新的 resource 性能条目时发出通知。使用 buffered 选项访问观察者创建之前的条目。

const observer = new PerformanceObserver((list) => {
  const scripts = list.getEntries().filter((entry) => {
    return entry.initiatorType === "script";
  });
  console.log(scripts);
});

observer.observe({ type: "resource", buffered: true });

使用 Performance.getEntriesByType() 的示例，它仅显示在您调用此方法时浏览器性能时间轴中存在的 resource 性能条目

const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.initiatorType === "script";
});
console.log(scripts);

规范

规范
资源计时 # dom-performanceresourcetiming-initiatortype

浏览器兼容性

BCD 表格仅在浏览器中加载