Почему использовать ::before/::after для 10k элементов эффективнее, чем добавлять DOM-узлы?

Question

Псевдоэлементы (::before, ::after) не создают реальных DOM-узлов, а рендерятся браузером на уровне CSS. Это снижает нагрузку на DOM-дерево и ускоряет рендеринг.

YeaHub · Accepted Answer

Проблема с DOM-узлами:Каждый из 10k элементов добавляется в DOM-дерево, что требует:Выделения памяти.Пересчета стилей и макета (reflow/repaint).Пример:for (let i = 0; i < 10000; i++) {
  const div = document.createElement('div');
  div.textContent = 'Элемент ' + i;
  document.body.appendChild(div); // 10k новых узлов!
}Преимущества псевдоэлементов:Нет нагрузки на DOM:Псевдоэлементы существуют только в CSSOM (CSS Object Model).Браузер оптимизирует их отрисовку.Пример использования:.item::before {
  content: "•";
  margin-right: 5px;
}Даже для 10k элементов с классом .item — всего один CSS-правило вместо 10k узлов.Вывод:Для декоративных элементов (иконки, маркеры) используйте ::before/::after вместо JavaScript/DOM.