PerformanceNavigationTiming: свойство type

Свойство type только для чтения возвращает тип навигации.

Вы можете использовать это свойство для категоризации данных о времени навигации, так как каждый из этих типов имеет разные характеристики производительности. Пользователи, перемещающиеся вперед и назад, могут испытывать более быстрый сайт, чем пользователи, выполняющие навигацию впервые или отправляющие формы и т. д.

Например, если ваш сайт часто предоставляет новый контент, вы можете обновить этот контент с помощью Fetch или аналогичного метода и избежать необходимости для пользователей постоянно нажимать кнопку перезагрузки всей страницы. Тип "reload" поможет вам найти страницы, которые часто перезагружаются.

Свойство type может иметь следующие значения:

"navigate"

Навигация, начатая щелчком по ссылке, вводом URL-адреса в адресную строку браузера, отправкой формы или инициализацией с помощью операции скрипта, отличной от reload и back_forward, как указано ниже.

"reload"

Навигация происходит с помощью операции перезагрузки браузера, location.reload() или директивы Refresh pragma, например, <meta http-equiv="refresh" content="300">.

"back_forward"

Навигация происходит через операцию перехода по истории браузера.

"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);
  }
});