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

Проблема с 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 новых узлов!
  }

Преимущества псевдоэлементов:

1. Нет нагрузки на DOM:

   • Псевдоэлементы существуют только в CSSOM (CSS Object Model).

   • Браузер оптимизирует их отрисовку.

2. Пример использования:

   .item::before {
     content: "•";
     margin-right: 5px;
   }

   Даже для 10k элементов с классом .item — всего один CSS-правило вместо 10k узлов.

Вывод:
Для декоративных элементов (иконки, маркеры) используйте ::before/::after вместо JavaScript/DOM.