Почему ::before/::after производительнее добавления 10 000 DOM-узлов?

Почему ::before/::after работают эффективнее, чем 10 000 DOM-узлов?

• Псевдоэлементы CSS (::before/::after) формируют виртуальное содержимое, не добавляя в документ реальные DOM-узлы
• DOM-дерево не увеличивается, поэтому браузеру требуется меньше памяти и вычислительных ресурсов
• Рендеринг выполняется эффективнее: браузеру не нужно парсить, раскладывать и перерисовывать новые элементы
• При динамическом изменении требуется меньше операций JavaScript, благодаря чему снижается нагрузка на Event Loop
• При большом количестве элементов (10k+) производительность выше за счет оптимизированного рендера
• Стили и трансформации можно задавать средствами CSS без создания дополнительных обработчиков событий
• Такой подход особенно подходит для декоративных элементов, которые не участвуют в логике приложения и не нужны в DOM

Итог: ::before/::after не дают DOM-дереву разрастаться и уменьшают нагрузку на парсер и рендеринг, поэтому интерфейс лучше масштабируется и сохраняет производительность при большом числе элементов.

Подробный ответ

Основной ответ

Применение псевдоэлементов ::before и ::after для множества элементов, например 10 000, обычно производительнее создания такого же числа реальных DOM-узлов. Псевдоэлементы не становятся отдельными узлами DOM-дерева: они дополняют визуальное представление уже существующих элементов. В результате уменьшается потребление памяти и нагрузка на браузер во время рендеринга.

Ключевые моменты

• Компактнее DOM-структура: 10 000 настоящих элементов формируют большую иерархию, из-за чего замедляются обход DOM, рендеринг, пересчет стилей и обработка событий. Псевдоэлементы остаются частью CSS-слоя и не увеличивают размер DOM.
• Быстрее Repaint и Reflow: Обновление псевдоэлементов часто ограничивается перерисовкой (repaint) и не требует перестройки структуры (reflow), что помогает экономить ресурсы браузера.
• Меньше потребление памяти: Чем меньше создаваемых объектов, тем ниже расход памяти. Это особенно важно на страницах с большим количеством элементов.
• Проще управление: Оформление псевдоэлементов централизованно задается в CSS, поэтому не приходится изменять DOM через JavaScript. Это упрощает сопровождение кода и сокращает число вызовов DOM API.

Практический контекст

В React 18+ и подобных библиотеках создание большого числа однотипных элементов как DOM-узлов может привести к заметным лагам. Если же декоративные детали реализовать через ::before/::after, можно добавлять визуальные эффекты — например, иконки, рамки и цвета — без увеличения виртуального DOM и реального дерева. Такой прием применяют в интерфейсах с большими списками, таблицами и галереями, где необходимо сохранить отзывчивость UI.