PerformanceNavigationTiming: type 属性

type 只读属性返回导航类型。

您可以使用此属性将导航计时数据分类，因为每种类型都将具有不同的性能特征。来回浏览的用户可能会比首次导航或提交表单的用户体验更快，等等。

例如，如果您的网站经常提供新内容，您可能希望使用 Fetch 或类似方法刷新该内容，并避免用户每次都必须重新加载整个页面。"reload" 类型可以帮助您找到经常重新加载的页面。

值

type 属性可以具有以下值

"navigate": 通过单击链接、在浏览器的地址栏中输入 URL、提交表单或通过除下面列出的 reload 和 back_forward 之外的脚本操作启动的导航。
"reload": 通过浏览器的重新加载操作进行导航，location.reload() 或像 <meta http-equiv="refresh" content="300"> 这样的刷新 pragma 指令。
"back_forward": 通过浏览器的历史记录遍历操作进行导航。
"prerender": 通过 prerender 提示启动的导航。

示例

记录重新加载导航

type 属性可用于检查导航是否为 reload 类型。您可以将这些 reload 条目收集到服务器端端点中，以确定您的网站中哪些页面重新加载次数最多，或者收集所有导航类型，并确定例如用户来回浏览的百分比。

使用 PerformanceObserver 的示例，它会通知浏览器性能时间线上记录的新 navigation 性能条目。使用 buffered 选项访问观察器创建之前的条目。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.type === "reload") {
      console.log(`${entry.name} was reloaded!`);
      console.log(entry);
    }
  });
});

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

使用 Performance.getEntriesByType() 的示例，它只显示在调用此方法时浏览器性能时间线上存在的 navigation 性能条目

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  if (entry.type === "reload") {
    console.log(`${entry.name} was reloaded!`);
    console.log(entry);
  }
});

规范

规范
导航计时级别 2 # dom-performancenavigationtiming-type

浏览器兼容性

BCD 表仅在浏览器中加载