Оптимизация рендеринга древовидных структур: от тяжелых SQL-запросов к CSS Grid и битовым маскам

[DimkaMironov]

Проблема глубокой вложенности при отрисовке каталогов​

Столкнулся на прошлой неделе с задачей: нужно было вывести дерево категорий с уровнем вложенности до 10 и общим количеством узлов около 5000. Классический рекурсивный подход на PHP начал «задыхаться» уже на 2000 объектов: генерация страницы занимала почти 1.8 секунды, а DOM-дерево весило как чугунный мост. Главная беда была в избыточности оберток для отступов.

Главное правило при работе с тяжелыми структурами: перекладывай расчеты на БД, а визуализацию — на возможности современного браузера, избегая лишних узлов.

Бэкенд: Уходим от рекурсии в PHP​

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

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

по индексации иерархий.

Фронтенд: CSS Grid против вложенных div​

Раньше я делал отступы через padding-left или вложенные контейнеры. Это плохо для производительности. Сейчас применил CSS Grid, где уровень вложенности передается в custom property. Вот как это выглядит на практике:

1. Каждому элементу в PHP назначается переменная --level.
2. Сетка настраивается так, чтобы колонки соответствовали уровням.
3. Элемент занимает нужную позицию через grid-column-start.

• Уменьшение веса HTML на 40% за счет удаления вложенных оберток.
• Браузер отрисовывает такую страницу в 3 раза быстрее.
• Код остается читаемым и легко стилизуется под мобилки.

Если нужно добавить логику сворачивания веток без JS-фреймворков, отлично работают невидимые чекбоксы. Состояние хранится прямо в DOM, а стили через селектор ~ управляют видимостью дочерних элементов. Замеры в Chrome DevTools показали, что переключение ветки происходит за 12-15 мс, что практически мгновенно для пользователя. Больше подробностей по реализации можно найти на ресурсе devnotes-hub . ru/post-au220199 (чтобы перейти, уберите пробелы до и после точки), там лежат исходники чистого CSS-решения.