Про то, что клиентское кэширование использовать можно и нужно, за последние несколько лет узнали многие, а вот о том какие проблемы это вызывает — каждый узнает на своем опыте. Поэтому спешу поделиться своим опытом и проблемой, возникшей с пользователями, у которых кэш браузера выключен. Пользователи не знают, что у них выключен кэш и жалуются на медленную скорость загрузки страниц.
На проекте, в котором мне довелось работать, была проблема большого количества java-script файлов (около 40 штук — использовались 2 js библиотеки + десяток самописных компонентов). Такое количество последовательно подгружаемых файлов вызывало долгую загрузку страницы. Я, как человек знакомый с трудами товарища sunnybear, предложил склеить все эти файлы в один и закэшировать его.
В итоге сайт залетал, и мы уже было хотели расслабиться, как вдруг появились сообщения от пользователей, которые по прежнему сообщали о проблеме долгой загрузки страницы. После непродолжительных поисков было обнаружено, что это пользователи, у которых по тем или иным причинам отключен браузерный кэш.
Итак, задача заключалась в определении пользователей с отключенным кэшем и своевременном их информировании. По счастью первая страница проекта уже содержала список проверок на блокировку всплывающих окон, рабочий js и flash. Поэтому добавление проверки на кэш браузера было вполне логичным, и не портило существующую концепцию.
Любопытно, что задав этот вопросу гуглу, я получил список форумов с какими-то сумасшедшими идеями подсчета времени запроса и прочими невнятными идеями. Поэтому алгоритм проверки рабочего кэша пришлось придумать:
Пример реализации я упрощаю до двух php файлов + jquery. Суть решения из него ясна, так что адаптацию для вашего фреймфорка или языка сможете сделать сами.
Листинг файла ajaxCacheChecker.php — этот файл мы и будем запрашивать дважды
Листинг файла index.php — этот файл как бы и есть наше приложение
Решение не работает в Opera и Safari
Если вы знаете, как добавить поддержку этих браузеров — напишите комментарий
Надеюсь, что мои изыскания помогут и вам разрешить свои споры с клиентами и пользователями по поводу долго загружающейся страницы.
Данное решение не подразумевает, что проверка будет происходить на каждой странице. Если вы хотите внедрить проверку везде, то используйте логику, приведенную в комментарии товарища maghamed
UPD: cпасибо товарищам tenshi и TheShock за избавление от сессий в алгоритме
UPD2: учтены комментарии товарища zerkms. Найдена ошибка работы в Opera и Safari
Предыстория (можно пропустить)
На проекте, в котором мне довелось работать, была проблема большого количества java-script файлов (около 40 штук — использовались 2 js библиотеки + десяток самописных компонентов). Такое количество последовательно подгружаемых файлов вызывало долгую загрузку страницы. Я, как человек знакомый с трудами товарища sunnybear, предложил склеить все эти файлы в один и закэшировать его.
В итоге сайт залетал, и мы уже было хотели расслабиться, как вдруг появились сообщения от пользователей, которые по прежнему сообщали о проблеме долгой загрузки страницы. После непродолжительных поисков было обнаружено, что это пользователи, у которых по тем или иным причинам отключен браузерный кэш.
Итак, задача заключалась в определении пользователей с отключенным кэшем и своевременном их информировании. По счастью первая страница проекта уже содержала список проверок на блокировку всплывающих окон, рабочий js и flash. Поэтому добавление проверки на кэш браузера было вполне логичным, и не портило существующую концепцию.
Как проверить кэш браузера из js?
Любопытно, что задав этот вопросу гуглу, я получил список форумов с какими-то сумасшедшими идеями подсчета времени запроса и прочими невнятными идеями. Поэтому алгоритм проверки рабочего кэша пришлось придумать:
- Отправляем запрос на сервер
- Получаем ответ с неким содержимым и заголовками кэширования этого запроса
- Изменяем содержимое на сервере
- Отправляем второй запрос на сервер
- Сравниваем полученное содержимое. Если кэш работает, то содержимое второго запроса будет соответствовать первому, если нет — мы получим измененное содержимое с сервера
Реализация алгоритма на PHP
Пример реализации я упрощаю до двух php файлов + jquery. Суть решения из него ясна, так что адаптацию для вашего фреймфорка или языка сможете сделать сами.
Листинг файла ajaxCacheChecker.php — этот файл мы и будем запрашивать дважды
- <?php
- $etag = 'cacheChecker';
-
- if (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $_GET['s'] || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
- header('HTTP/1.1 304 Not Modified');
- } else {
- $maxAge = 60;
-
- header('Last-Modified: ' . gmdate('r', $_GET['s']));
- header('Etag: ' . $etag);
- header('Pragma: private');
- header('Cache-Control: private');
- header("Expires: " . date("r", $_GET['s'] + $maxAge));
-
- echo microtime();
- }
- ?>
Листинг файла index.php — этот файл как бы и есть наше приложение
- <?php $timeStamp = time(); ?>
- <html>
- <head><script type="text/javascript" src="js/jquery.js"></script></head>
- <body>
- <div id="cacheCheck">checking cache</div>
- <script>
- var cacheCheck1 = "";
- var cacheCheck2 = "";
-
- function checkBrowserCache() {
- $.get("ajaxCacheChecker.php?s=<?=$timeStamp?>", function(data){
- cacheCheck1 = data;
- $.get("ajaxCacheChecker.php?s=<?=$timeStamp?>", function(data2){
- cacheCheck2 = data2;
- checkBrowserCacheResults();
- });
- });
- }
-
- function checkBrowserCacheResults() {
- if (cacheCheck1 != cacheCheck2) {
- $('#cacheCheck').text('cache disabled. Please enable browser cache...');
- } else {
- $('#cacheCheck').text('cache enabled!');
- }
- }
-
- checkBrowserCache();
- </script>
- </body>
- </html>
Недостаток
Решение не работает в Opera и Safari
Если вы знаете, как добавить поддержку этих браузеров — напишите комментарий
Заключение
Надеюсь, что мои изыскания помогут и вам разрешить свои споры с клиентами и пользователями по поводу долго загружающейся страницы.
Данное решение не подразумевает, что проверка будет происходить на каждой странице. Если вы хотите внедрить проверку везде, то используйте логику, приведенную в комментарии товарища maghamed
UPD: cпасибо товарищам tenshi и TheShock за избавление от сессий в алгоритме
UPD2: учтены комментарии товарища zerkms. Найдена ошибка работы в Opera и Safari
