Ускоряем ReadyScript. Инструкция по применению кэширования блоков

Мы постоянно работаем над оптимизацией различных участков кода нашей платформы. И недавно мы решили внедрить возможность простой настройки HTML – кэша многих блоков.

Включение HTML – кэша очень значительно ускоряет отдачу готового HTML кода в браузер клиентов.

Чтобы понять за счет чего получается ускорение, рассмотрим процесс рендеринга одного блока на странице. Этот процесс состоит из следующих этапов:

1. Запуск блок-контроллера, получение входных параметров
2. Выборка данных из БД, подготовка их к отправке в шаблон
3. Компиляция Smarty – шаблона (выполняется в случае, если шаблон изменялся)
4. Передача данных в шаблон и исполнение компилированного шаблона.
5. Отдача сформированного HTML в браузер

Этапы 2, 3, 4 – являются ресурсозатратными, так как отнимают ресурсы БД, процессора и файловой системы.

В случае, когда включен HTML – кэш, платформа перед выполнением этапа 5, сохраняет готовый HTML в кэш и дополняет его метаданными - временем формирования и списком значений входных параметров. Когда в следующий раз, необходимо отобразить тот же блок, рендеринг блока происходит по другому сценарию:

1. Запуск блок-контроллера, получение входных параметров
2. Поиск готового HTML-кода для данных входных параметров с подходящим временем формирования
3. Отдача сформированного HTML в браузер

Как видно, в этой цепочке процессов нет ни одной ресурсоемкой операции. Отдача готового HTML-кода блока происходит мгновенно.

Мы добавили настройку “Время кэширования HTML блока, секунд” в блоки:

1. Список последних новостей
2. Баннерная зона
3. Слайдер
4. Товары из нескольких категорий
5. Все бренды
6. Выборка категорий
7. Товары в виде баннера
8. Продукты из категории

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

Как выбрать время кэширования? Тут нужно выбрать для себя максимальное время неактуальности информации в данном блоке, которое вас будет устраивать.

Например, если вы установите срок HTML - кэширования  1 час (3600 секунд), то максимальное время, в течении которого в данном блоке может быть устаревшая информация  - 1 час. Под устаревшей, мы имеем ввиду информацию, которая уже была изменена в административной панели, а у клиентов она еще не обновилась.

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

Важно: HTML - кэширование не работает, если будет включена опция "Всегда проверять шаблоны на предмет модификации" в разделе Управление -> Настройка системы. Убедитесь, что на вашем "боевом" сервере эта опция выключена.

Информация для разработчиков

Мы очень рекомендуем нашим партнерам использовать в своих кастомных блоках HTML – кэширование Smarty, поэтому ниже опишем полную инструкцию, как это организовывать.

Напомним, что кэшировать логично те блоки, которые имеют мало контекстов или иначе говоря зависят от небольшого числа значений переменных, чтобы объем кэш-данных не заполонил весь сервер.

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

Рассмотрим, как выглядит блок-контроллер поддерживающий HTML – кэширование на примере блока “Выборка категорий” из модуля Каталог. Мы тщательно снабдили комментариями код, представленный ниже, чтобы было ясно, как работает каждая строка.

<?php namespace Catalog\Controller\Block; use Catalog\Model\DirApi; use RS\Controller\StandartBlock; use RS\Module\AbstractModel\TreeList\AbstractTreeListIterator; use RS\Orm\Type; /** * Блок-контроллер - выводит отобранные категории */ class TopCategories extends StandartBlock { protected static $controller_title = 'Выборка категорий'; protected static $controller_description = 'Отображает изображения и названия некоторых выбранных категорий'; /** * @var array Значения параметров по умолчанию. Список параметров задается в методе getParamObject ниже */ protected $default_params = [ 'indexTemplate' => 'blocks/topcategories/top_categories.tpl', 'category_ids' => [], 'sort' => '', 'cache_html_lifetime' => 300 ]; /** * @var Dirapi - PHP API для работы с категориями товаров. * Public, чтобы можно было обращаться к PHP Api через $this_controller->dir_api в шаблоне */ public $dir_api; /** * Возвращает ORM объект, содержащий настриваемые параметры или false в случае, * если контроллер не поддерживает настраиваемые параметры * * @return \RS\Orm\ControllerParamObject | false */ function getParamObject() { return parent::getParamObject()->appendProperty([ 'category_ids' => new Type\ArrayList([ 'description' => t('Отображать категории'), 'tree' => [['\Catalog\Model\DirApi', 'staticTreeList']], 'attr' => [[ AbstractTreeListIterator::ATTRIBUTE_MULTIPLE => true, ]], ]), 'sort' => new Type\Varchar([ 'description' => t('Сортировка'), 'listFromArray' => [[ '' => t('Без сортировки'), 'id' => t('Идентификатор'), 'name' => t('Наименование'), 'sortn' => t('Порядок в административной панели') ]] ]), //Параметр, который нужен для организации HTML - кэширования 'cache_html_lifetime' => new Type\Integer([ 'description' => t('Время кэширования HTML блока, секунд?'), 'hint' => t('0 - кэширование выключено. Значение больше нуля ускоряет работу сайта, но допускает неактуальность данных на срок кэширования. Работает только если в настройках системы включено кэширование данных.'), ]), ]); } function init() { $this->dir_api = new Dirapi(); } function actionIndex() { //Формируем $cache_id из входящих параметров. Если блок получает какие-то параметры из _GET, //то нужно их добавить к строке $cache_id. Также, если блок должен возвращать разное содержимое, //опираясь на какие-то другие факторы и внутренние переменные, необходимо, чтобы они участвовали в $cache_id $cache_id = json_encode($this->getParam()); //Получаем имя шаблона, который будет рендериться $template = $this->getParam('indexTemplate'); //Проверяем, истек ли последний HTML-кэш, который был создан для $cache_id, $template и времени cache_html_lifetime //метод isViewCacheExpired - учитывает настройки в административной панели, текущий мультисайт, и т.д. if ($this->isViewCacheExpired($cache_id, $template, $this->getParam('cache_html_lifetime'))) { //В данный участок кода попадаем только, если нет готового HTML - кэша. //Запускаем выборку данных из БД и их передачу в шаблон... $sort_by_title = $this->getParam('sort'); if ($dir_ids = $this->getParam('category_ids')) { $this->dir_api->setFilter('id', $dir_ids, 'in'); if (!empty($sort_by_title)) { $this->dir_api->setOrder($this->getParam('sort')); } } $this->view->assign([ 'categories' => $this->dir_api->getList() ]); } return $this->result->setTemplate($template); } }

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

Это особенно касается инструкций по подключению JS и CSS в шаблонах. Ведь в случае, когда готовый HTML сразу отдается браузеру, никто не добавляет в список подгрузки JS и CSS ресурсы, так как эти инструкции обычно находятся в шаблонах в виде конструкций {addjs file=…} и {addcss file=…}.

Для решения данной проблемы, в Smarty предусмотрена конструкция {nocache}…..{/nocache}. Достаточно обернуть все участки, где подключаются скрипты или где они инициализируются и блок, загруженный из кэша будет работать в полном объеме в браузере у клиента.

{nocache} {* Эта часть всегда будет исполняться *} {addjs file="top-category.js"} {addcss file="top-category.css"} {/nocache} {* Все что ниже будет закэшировано в виде готового HTML *} {foreach $categories as $category} <div class="card" {$category->getDebugAttributes()}> <div class="card-image"> <a href="{$category->getUrl()}"><img src="{$category->getMainImage(100, 100)}" alt="{$category.name}"></a> </div> <div class="card-text"><a href="{$category->getUrl()}"><span>{$category.name}</span></a></div> </div> {/foreach}

Особенности обновления

Если в интернет-магазине используется индивидуальная тема и включена опция «Включить кэширование данных» в разделе Управление -> Настройка системы, то в случае отсутствия обрамляющих тегов {nocache} вокруг инструкций подключения JS и CSS ресурсов в шаблонах тех блоков, где появилось кэширование, блоки могут начать отображаться некорректно.

Для временного решения проблемы, можно установить время жизни кэша 0(ноль) в настройках конкретного блока или отключить галочку «Включить кэширование данных» в разделе Управление -> Настройка системы.

Для постоянного решения проблемы, обрамите конструкциями {nocache}….{/nocache} все участки шаблона, которые требуют выполнения, несмотря на кэширование.

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

Специально для решения данной проблемы мы обновили JS скрипты, которые отвечают в темах за работу функциональности избранного и сравнения (в теме faltlines - это файлы rs.compare.js и rs.favorite.js), теперь при отображении блока скрипт автоматически исправит состояние соответствующих кнопок.

Другие улучшения в недавнем обновлении

В последнем апдейте, мы обновили все файлы проекта и удалили оттуда старый синтаксис (PHP 5.3) массивов. Код в целом стал еще чище и приятнее.

В целях оптимизации, мы также добавили новый блок контроллер \Shop\Controller\Block\CartFull, который теперь используется вместо \Shop\Controller\Block\Cart в новых вариантах оформления заказа. Блок CartFull загружает больше данных из БД, чем блок Cart. А с учетом того, что блок Cart присутствует на всех страницах сайта – это оказалось сильно значимо.

Вместо заключения

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

Всех с наступающим новым годом!