Оптимизация рендеринга больших списков через CSS Grid и кастомный алгоритм фильтрации на PHP

[PravdivyyOgon]

Как я ускорил отрисовку каталога на 15000 позиций без пагинации​

Недавно столкнулся с задачей: заказчик категорически отказался от стандартной пагинации в админке, требуя «бесконечный» список с мгновенным поиском. Проблема в том, что стандартный вывод через циклы в PHP при таком объеме данных выжирает память, а браузер начинает задыхаться при отрисовке DOM. Расскажу, как я решил это связкой оптимизированного бэкенда и современной верстки.

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

Сначала по бэкенду. Вместо того чтобы тянуть всё через ORM, я перешел на чистый SQL с использованием Generator в PHP. Это позволило итерировать записи, не загружая весь массив в RAM. Для фильтрации по нескольким полям я внедрил простой, но эффективный префиксный поиск. Детали реализации этого подхода можно найти в архиве моих заметок, где есть

Гости не видят ссылку Войти или зарегистрироваться

логики работы с буферизацией вывода.

Фронтенд-магия через CSS Grid​

Чтобы избежать «тормозов» при прокрутке, я отказался от Flexbox в пользу Grid. Основные профиты:

• Браузер быстрее просчитывает сетку, так как она жестко задана.
• Использование content-visibility: auto; позволяет пропускать рендеринг блоков, которые еще не доскроллены.
• Минимальное количество вложенных тегов снижает нагрузку на дерево DOM.

Алгоритм внедрения был следующим:

1. Подготовка SQL-индекса по полям поиска для ускорения выборки до 15-20мс.
2. Реализация PHP-контроллера, который отдает данные чанками через StreamedResponse.
3. Настройка CSS-контейнера с фиксированным grid-template-columns, чтобы избежать пересчета layout при добавлении новых строк.

В итоге, время до полной отрисовки (LCP) сократилось с 4.2 секунд до 0.8 секунд на холодном кэше. Если вы работаете с высоконагруженными панелями управления, крайне рекомендую пересмотреть подход к virtual scrolling и не бояться отдавать часть логики на сторону CSS.