Загружается ли моя страница из кэша браузера?

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

настройка довольно проста. Макет для приложения ищет новые элементы каждые 8 секунд и обновляет значок + список элементов соответственно.

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

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

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

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

..И хотя это работает, опрос новых элементов на "load" полезен только при загрузке страницы из кэша. Есть ли надежный кросс-браузерный способ определить, загружается ли страница из кэш?

14
browser-cache browser-history javascript javascript-events jquery

5 ответов

частичное хакерское решение должно иметь var с текущим временем, установленным на сервере, и установить var с текущим временем клиента в верхней части страницы. Если они отличаются более чем на определенный порог (1 минута?) тогда вы можете предположить, что это кэшированная загрузка страницы.

пример JS (использование ASP.Net синтаксис для серверной части):

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

кроме того, Используя cookies на стороне клиента (при условии, что cookies включены), вы можете проверить наличие cookie с уникальным ключом для текущая версия страницы. Если нет, вы пишете для него файл cookie, и на любой другой странице доступа существование файла cookie показывает, что он загружается из кэша.

например. (предполагается, что некоторые вспомогательные функции cookie доступны)

var uniqueKey = '<%= SomeUniqueValueGenerator() %>';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe
6

время навигации теперь в большинстве браузеров(ie9+) http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }
12

Вы можете задать веб-браузер не кэшировать страницу. Попробуйте эти заголовки HTTP:

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

в частности, Cache-control: no-store интересно, потому что он говорит браузеру не хранить страницу в памяти вообще, что предотвращает загрузку устаревшей страницы при нажатии кнопки Назад/Вперед.

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

8

лично я бы установил атрибут данных, содержащий идентификатор элемента для каждого элемента.

то есть

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

код

0

хороший ответ:https://stackoverflow.com/a/9870920/466363

вы также можете использовать время навигации для измерения задержки сети в деталях.

вот хорошая статья:http://www.html5rocks.com/en/tutorials/webperformance/basics/

Если разница во времени между fetchStart и responseStart очень низкая, страница была загружена из кэша, например.

по stewe

0