Причины блокировки кэша обратного просмотра bfcache

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

Современные браузеры обеспечивают оптимизацию навигации по истории с помощью кэша обратного просмотра (bfcache). Это позволяет мгновенно загружать страницы, которые пользователь уже посещал ранее. Страницы могут блокироваться или удаляться из bfcache по разным причинам, некоторые из которых определены спецификациями, а другие зависят от реализации браузера.

Для отслеживания причин блокировки bfcache, класс PerformanceNavigationTiming включает свойство notRestoredReasons. Оно возвращает объект NotRestoredReasons с соответствующей информацией о главном фрейме и всех вложенных фреймах <iframe> в документе:

• Причины блокировки использования bfcache.
• Подробности, такие как фрейм id и name, для выявления <iframe> в HTML.

Данные о текущих блокировках bfcache можно получить с помощью PerformanceObserver, например так:

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  perfEntries.forEach((navEntry) => {
    console.log(navEntry.notRestoredReasons);
  });
});

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

Также исторические данные о блокировках bfcache можно получить подходящим методом, например Performance.getEntriesByType():

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

Приведенные выше фрагменты кода запишут объекты NotRestoredReasons в консоль. Эти объекты имеют следующую структуру, отражающую состояние блокировки главного фрейма:

{
  children: [],
  id: null,
  name: null,
  reasons: [
    { reason: "unload-listener" }
  ],
  src: "",
  url: "example.com",
}

Свойства:

children Только чтение Экспериментальная

Массив объектов NotRestoredReasons, по одному для каждого вложенного <iframe> в текущем документе, которые могут содержать причины блокировки главного фрейма, связанные с фреймами-потомками. Каждый объект имеет ту же структуру, что и родительский объект — таким образом, в объекте рекурсивно может быть представлено любое количество уровней вложенных <iframe>. Если у фрейма нет потомков, массив будет пустым; если документ находится в кросс-доменном <iframe>, children вернёт null.

id Только чтение Экспериментальная

Строка, представляющая значение атрибута id <iframe> документа (например, <iframe id="foo" src="...">). Если документ не находится в <iframe> или у <iframe> нет установленного id, id вернёт null.

name Только чтение Экспериментальная

Строка, представляющая значение атрибута name <iframe> документа (например, <iframe name="bar" src="...">). Если документ не находится в <iframe> или у <iframe> нет установленного name, name вернёт null.

reasons Только чтение Экспериментальная

Массив объектов NotRestoredReasonDetails, каждый из которых представляет причину блокировки просмотренной страницы при использовании bfcache. Если документ находится в кросс-доменном <iframe>, reasons вернёт null, но родительский документ может показать reason из "masked" если какие-либо <iframe> заблокировали использование bfcache для главного фрейма. Более подробные сведения о причинах см. в разделе «Причины блокировки».

src Только чтение Экспериментальная

Строка, представляющая путь к источнику <iframe> документа (например, <iframe src="exampleframe.html">). Если документ не находится в <iframe>, src вернёт null.

url Только чтение Экспериментальная

Строка, представляющая URL просмотренной страницы или <iframe>. Если документ находится в кросс-доменном <iframe>, url вернёт null.

Когда страница содержит вложенные фреймы <iframe> одного домена, возвращаемое значение notRestoredReasons будет содержать массив объектов в свойстве children, представляющих причины блокировки, связанные с каждым вложенным фреймом.

Например:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/iframe-examples.html"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        { "reason": "unload-listener" }
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

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

Например:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "https://www.example2.com/",
      url: null
    }
  ],
  id: null,
  name: null,
  reasons: [
        { "reason": "masked" }
  ],
  src: null,
  url:"https://www.example.com"
}

Для всех фреймов <iframe> разных доменов причины блокировки не сообщаются; для главного фрейма сообщается причина "masked", чтобы указать, что причины скрыты для обеспечения конфиденциальности. Обратите внимание, что "masked" может также использоваться для сокрытия причин, специфичных для пользовательского агента; это не всегда указывает на проблему в <iframe>.

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

Начальные значения, перечисленные в спецификации, следующие:

"fetch"

Во время выгрузки запрос fetch, инициированный текущим документом (например, через fetch()), был отменён во время выполнения. В результате страница не находилась в стабильном состоянии, которое можно было бы сохранить в bfcache.

"lock"

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

"masked"

Точная причина скрыта в целях конфиденциальности. Это значение может означать следующее:

• Текущий документ содержит дочерние элементы, содержащиеся в источнике с другим происхождением <iframe>, и они препятствовали сохранению в bfcache.
• Текущий документ не мог быть сохранён в bfcache по причинам, специфичным для пользователя агента.

"navigation-failure"

Исходная навигация, создавшая текущий документ, завершилась ошибкой, и сохранение результирующего документа с ошибкой в bfcache было предотвращено.

"parser-aborted"

Текущий документ никогда не завершал начальную разборку HTML, и сохранение незавершенного документа в bfcache было предотвращено.

"websocket"

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

Дополнительные причины блокировки могут использоваться некоторыми браузерами, например:

"unload-listener"

Страница регистрирует обработчик unload, который предотвращает использование bfcache. Это служит полезным предупреждением, так как unload устарело. Подробнее см. примечания по использованию.

"response-cache-control-no-store"

Страница использует no-store в качестве значения заголовка Cache-Control.

"related-active-contents"

Страница была открыта из другой страницы, которая всё ещё ссылается на эту страницу, например, с помощью функции «дублирования вкладки».

• notRestoredReasons API Explainer
• PerformanceNavigationTiming.notRestoredReasons
• NotRestoredReasons