Здравствуйте. Часто на сайтах есть динамические данные, которые нельзя по каким-либо причинам кэшировать. Это “вычисляемые” данные. Например, количество товаров в корзине и общая сумма корзины, целевые рекламные баннеры, показываемые авторизованному/неавторизованному пользователю в зависимости от его покупок, поисков и т.п., часто обновляемый курс валют и … можно и дальше перечислять.
Как правило, вы выбираете для проекта фреймворк, CMS, которые замечательно все кэшируют и быстро отдают страницы, но подобные данные неоправданно тормозят вывод страниц. Что делать?

Первое, что приходит на ум — подгружать необходимые данные позже! Идея не нова.
Недавно 1С-Битрикс предложила технологию «Композитный сайт» (которую также успешно запатентовала). Принцип технологии аналогичен, но и привязка к CMS жесткая.

Мне же был необходим механизм, который не зависел бы от фреймворка или CMS, а также подключался без долгих настроек и возни. После недолгих раздумий родился маленький инструмент, помогающий просто реализовать подгрузку необходимых данных — dynamicData.
Покажу сразу на простом примере. Есть страница:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dynamicData</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  ...content...
  <div class="dynamicData" url="/test.php">
    <noindex><data><?=json_encode(array('number'=>12, 'text'=>'string'))?></data></noindex>
  </div>
  ...content...
  <script src="dynamicData.js"></script>
</body>
</html>

и есть “тяжелый” скрипт test.php:
<?
echo 'dynamicData';
print_r( $_POST['data'] );
sleep(10); // долгие вычисления
echo rand(1,10).'<br>';
?>

Страница закэширована и быстро отдается пользователю. В блоке dynamicData есть все для запроса данных с сервера.
url — путь к скрипту от корня сайта, который обработает и вернет динамические данные (обязательный параметр).
Вложенный блок data содержит в себе данные в JSON для передачи скрипту, если это необходимо, иначе можно убрать из блока теги noindex и data. Тег noindex используем для сокрытия данных от поисковика. В css добавим 
.dynamicData data{display:none;}
для сокрытия данных от пользователя.

Что еще может dynamicData? Добавляя и комбинируя атрибуты блока динамических данных можно добиться:
  • replace — заменить div.dynamicData контентом динамических данных
  • add | add=«after» — добавить в конец div.dynamicData. При этом replace игнорируется.
  • add=«before» — добавить в начало div.dynamicData. При этом replace игнорируется.
  • repeat=«n» — повторять запросы каждые n секунд. При этом replace игнорируется.
  • onBeforeSend="[ваша функция]" — событие запустит вашу функцию до отправки запроса. Функции будет передан объект (см. ниже)
  • onBeforeOut="[ваша функция]" — событие запустит вашу функцию до вывода ответа сервера. Функции будет передан объект (см. ниже)
  • onAfterOut="[ваша функция]" — событие запустит вашу функцию после вывода ответа сервера. Функции будет передан объект (см. ниже)


Обработка событий.
Добавим атрибут onAfterOut=«myOnAfterOut» и создадим функцию обработки события:
…
function myOnAfterOut(param){

}
…

в этом случае в param получим:
  • param.data — динамические данные
  • param.obj — элемент DOM для динамических данных
  • param.url — URL скрипта


Вывод ошибок.
В объекте outErr (dynamicData.js) мы можем добавлять свои тексты статусов ошибок. Если статус не будет найден, выведется ответ сервера. При ошибках игнорируются атрибуты replace, add, repeat.
Код на Github.
Вот и все. Я не гуру в javascript, поэтому с радостью приму замечания и предложения по оптимизации кода и исправлению возможных ошибок.