Оптимизация рендеринга больших списков данных: связка PHP-бэкенда и CSS Grid с динамическим расчетом высоты элементов на C++ через WebAssembly

[Olga_Voronina]

Проблема производительности при выводе 100k+ записей​

Недавно столкнулся с задачей, которая на первый взгляд кажется тривиальной: вывести огромный массив данных из БД в интерфейс с возможностью фильтрации «на лету». Обычный пагинатор заказчика не устраивал, нужен был бесконечный скролл с сохранением идеальной плавности 60 FPS. Основная сложность возникла в расчете геометрии сетки, когда элементы имеют разную высоту в зависимости от контента.
Стандартный подход на чистом JS начинал «захлебываться» уже на 10 тысячах объектов из-за постоянных пересчетов в основном потоке. Решил перенести тяжелую логику на C++, скомпилированный в WASM, и использовать возможности современного CSS для минимизации перерисовок.

Важное правило: никогда не доверяйте отрисовку браузеру «как есть», если количество DOM-узлов превышает разумные пределы. Виртуализация — наш единственный выход.

Серверная часть на PHP: подготовка данных​

На стороне PHP 8.2 я реализовал отдачу данных через генераторы, чтобы не забивать память сервера. Вместо формирования огромного JSON-объекта, данные стримятся порциями. Это критично, когда у вас high-load проект и ограниченные ресурсы RAM.
Основные шаги оптимизации бэкенда:

1. Использование типизированных свойств в DTO для ускорения сериализации.
2. Кеширование метаданных структуры в Redis.
3. Принудительная передача Content-Length для корректной работы прогресс-баров на фронте.

Магия C++ и WebAssembly для расчетов​

Самое интересное происходит в WASM-модуле. Я написал небольшой класс на C++, который принимает массив длин текстовых блоков и ширину контейнера, а затем молниеносно вычисляет координаты каждого элемента в сетке. В JS такие циклы работают в 5-10 раз медленнее из-за специфики сборщика мусора и динамической типизации.
Для тех, кто хочет глубже погрузиться в механику взаимодействия памяти между JS и C++, рекомендую изучить

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

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

Верстка и CSS Grid​

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

• contain: strict; — говорим браузеру, что изменения внутри контейнера не влияют на внешнюю геометрию.
• will-change: transform; — выносим скролл-слой на GPU.
• Использование CSS-переменных для динамического обновления высоты виртуального контейнера.

В итоге, при скролле мы просто меняем transform: translateY() для пула из 20-30 DOM-элементов, а их содержимое и позиции подтягиваются из заранее просчитанного в WASM массива. Результат: нагрузка на CPU при скролле упала с 80% до стабильных 5-7%.

Практические выводы​

Разработка сложных интерфейсов требует комплексного подхода. Не бойтесь выходить за рамки одного языка. Связка PHP для бизнес-логики, C++ для тяжелой математики и грамотного CSS для рендеринга дает результат, недоступный при использовании «коробочных» библиотек. Главное — четко разделять ответственность между слоями системы и минимизировать количество операций с DOM.
крайсточка7029098