Сегодня расскажу про оптимизацию пользовательского интерфейса на примере приложения на декларативном фреймворке Evado.
Веб-приложение состоит из различных модулей, которые отвечают за создание метаданных, эксплуатацию приложения, администрирование и т.п. Базовые модули используют унифицированный интерфейс, построенный на Bootstrap 5.
Список объектов
Страница списка объектов в модуле Офис целиком генерируется на сервере. Дополнительные запросы с клиента подгружают постранично только сам список. Изначально время рендера в режиме development на виртуальном сервере составляло 90 - 110 миллисекунды (весьма недорогой сервер).
На странице, кроме основной информации, присутствуют несколько элементов, которые отображаются по команде пользователя. При каждом запросе сервер создает HTML-разметку в том числе и всех скрытых элементов, но необходимость даже в одном из них возникает не часто.
Таким образом, если переключатель скрытого элемента будет сначала загружать его, а потом отображать - это уменьшит время генерации всей страниц и ее размер. Особенно это касается боковой навигации. Дерево меню может быть сколь угодно большим и разветвленным, но главное, что каждый пункт проверяется безопасностью системы на доступность его для текущего пользователя. Ограничившись же только видимыми пунктами мы избегаем проверки всех остальных.
Затратами данной оптимизации является создание дополнительных контролеров на сервере для загрузки скрытых элементов. Прибылью - ускорение загрузки страницы и уменьшение нагрузки на сервер. После переделки на асинхронную загрузку скрытых элементов время генерации страницы уменьшилось до 30 - 40 миллисекунд.
Форма объекта
Формы для изменения данных объектов реализованы как модальное окно с набором вкладок. Каждая вкладка - это отдельная форма загружаемая с сервера.
Внутри формы могут использоваться дополнительные вкладки, относящие к открытому объекту. Пользователь видит содержимое только одной активной вкладки. Все остальные скрыты, но их содержимое генерируется сервере при загрузке формы.
После переделки вкладок на загрузку по требованию, время рендера формы класса, содержащей 11 вкладок, сократилось почти в четыре раза, а размер передаваемых данных в три раза.
Используемое в качестве примера приложение доступно на гитхаб.
