BFCache и pageshow: возврат к сохранённой странице

Назначение

При переходе назад браузер иногда восстанавливает сохранённое состояние страницы, а не загружает документ заново. Этот механизм отличается от обычного HTTP-кеша ресурсов и влияет на повторную инициализацию интерфейса.

Как это работает

Событие pageshow приходит при показе страницы. Его persisted помогает определить восстановление из кеша переходов. Установите обработчик в собственном скрипте и проверяйте сценарий перехода на другую страницу с последующим возвратом.

Пример

window.addEventListener("pageshow", event => {
  if (event.persisted) {
    console.log("Восстановлено сохранённое состояние страницы");
  } else {
    console.log("Обычный показ страницы");
  }
});

Что должно получиться

При подходящем восстановлении persisted будет true. Это не гарантируется для каждого перехода: решение зависит от страницы и браузера. Простое обновление вкладки проверяет другой сценарий.

Граница применения и частая ошибка

Не создавайте повторно обработчики и таймеры, если они уже существуют в восстановленном состоянии. Не путайте BFCache с ответом from disk cache в Network. Возвращённые данные могут устареть; проверку актуальности проектируйте отдельно, особенно после изменения состояния в другой вкладке.

Самостоятельная проверка

Откройте две страницы своего проекта, перейдите между ними и вернитесь кнопкой браузера. Сравните persisted и сохранённое положение прокрутки. Проверьте доступную диагностику BFCache в инструментах браузера и запишите причину отказа, если кеш не использован.

Связанные материалы

• Коллекции DOM
• Очистка обработчиков
• Безопасное обновление страницы