Компактная компоновка динамических страниц сайта (unobstructive AJAX)

20 Сен
2011

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

Однако, если рассмотреть структуру страницы более подробно, можно выделить отдельные блоки, отличающиеся друг от друга свойствами — периодичность обновления, зависимость от имени пользователя и т.д. Например, верстка шаблона страницы меняется исключительно редко — при смене дизайна и одинакова для всех пользователей, в то время, как блок с информацией об авторизованном пользователе разный для каждого пользователя, блок новостей может меняться раз в сутки.
Кеширование страницы целиком для каждого пользователя требует больше ресурсов и затрудняет тонкую настройку параметров кеширования.
При оптимизации проекта в своей практике я делю страницы на отдельные блоки, которые кешируются раздельно на сервере или клиенте. Основная часть страницы составляется из этих блоков, что позволяет генерировать ее намного быстрее, а дополнительные блоки со второстепенным содержимым подгружаются динамически через AJAX уже после загрузки основного контента, что не отвлекает внимание пользователя, существенно снижает сетевой трафик и более оптимально использует память сервера выделенную под кеш. Чтобы сделать верстку и код более читабельным и стандартным я использую небольшой jQuery скрипт и компактную верстку с атрибутами data-*.
Вот так выглядит верстка блока с информацией о текущем пользователе и новостной лентой:
<div id="logindisplay" data-content="/ru/Partials/Render/_Menu_LogOn"></div>
<div id="newsstream" data-content="/ru/Partials/Render/_News_Stream"></div>

Внутри тега div можно разместить содержимое, которое будет показано пользователю до загрузки контента и отключенном javascript. Одна страница может содержать множество подобных блоков, все они будут загружены по очереди. Кроме тега div с этой техникой можно использовать любой другой тег.
А это код функции, которая вызывается после загрузки страницы и подгружает остальной динамический контент:
function loadAjaxContent() {
    $('[data-content]').each(function (i) {
        $(this).addClass('ajax_loading');
        $(this).load($(this).attr('data-content'));
        $(this).removeClass('ajax_loading');
    });
}

Она находит все элементы на странице с атрибутом data-content, получает содержимое указанного урл и заменяет им содержимое элемента. Стиль ajax_loading используется для индикации процесса загрузки.
Быстрых вам сайтов!
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх