Является ли использование CSS-контента (т.е. Псевдоэлементов) более эффективным (т.е. Анализируется/выводится быстрее), чем добавление большего количества элементов DOM?

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

Например, вместо представления элемента списка с метаданными, подобным этому: 

<dd class="item">
    <div class="name">Name</div>
    <div class="desc">Description</div>
    <div class="location">Location</div>
    <div class="genre">Genre</div>
</dd>

Я мог бы представить это как это (& использование свойства content: для отображения метаданных): 

<dd class="child" 
    data-name="Name" 
    data-desc="Description" 
    data-location="Location" 
    data-genre="Genre">
</dd>

Итак, один элемент DOM с атрибутами данных в отличие от 5 отдельных элементов и, возможно, более чистая разметка.
Демо здесь: http://jsfiddle.net/quc8b/2/

Будет ли этот метод действительно улучшать производительность? Я думал, что с меньшим количеством элементов DOM javascript должен анализировать быстрее, и я должен иметь возможность добавлять/удалять узлы списка элементов быстрее. Но будет ли рендеринг (т.е. Рисование, макет и пересчет) быстрее? Другими словами, CSS-контент, обработанный/обработанный быстрее или эффективнее, чем традиционные элементы и текстовые узлы?

Как браузеры внутренне обрабатывают созданный CSS-контент в дереве рендеринга, а дерево документов неизвестно мне (теневой DOM может быть?). Существуют ли какие-либо статьи, которые обсуждают это?

Ответы

Ответ 1

Я также был заинтересован в выяснении этого. Итак, я сделал простой тестовый пример.

Я создал две HTML-страницы для сравнения:

А. Псевдоселекторы:

  • HTML: 50 000 из них: <p>paragraph</p>

  • CSS: p:before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; content: ""; }

B. Многие DOM-элементы:

  • HTML: 50 000 из них: <p><span class="icon"></span> paragraph</p>

  • CSS: .icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; }

Тесты:

Я использовал монитор производительности Chrome Devtools, работающий на Macbook Pro 2015 года.

Test1: "Начать профилирование и перезагрузить страницу"

Вариант B проиграл на ~ 400 мс. Для анализа потребовалось 2452 мс, а для "псевдо" варианта - 2033 мс. Я провел этот тест три раза с похожими результатами.

screenshot

Test2: изменение размера окна

Чтобы измерить изменение макета, я начал отдельную запись, в которой я изменил размер окна браузера 3 раза, переключившись с полноэкранного на полуэкранный режим (используя сочетания клавиш в диспетчере окон)

"Многие DOM-элементы" стали победителями, показав 1136мс времени рендеринга, в то время как "псевдоэлементы" заняли 1463мс.

enter image description here

Test3: Reflows

Я попытался вызвать перефразирование, измеряя высоту страницы, используя этот фрагмент Javascript: document.body.offsetHeight;

Но на это никогда не уходило более 4 мс... не хватало времени для надежного измерения производительности.

Очевидно, 50 000 элементов недостаточно, чтобы вызвать какое-либо существенное замедление в этой области.

PS: тестовый отбор не был таким уж научным, просто он оказался первым, о котором я подумал

Ответ 2

Обратите внимание, что этот ответ был дан много лет назад. Многие из приведенных ниже заявлений недействительны. Использование псевдоэлементов по-прежнему не рекомендуется при обслуживании контента, который должен быть доступен.

Я не знаю о производительности псевдоэлементов, но я обеспокоен тем, что вы поставили производительность выше всего остального.

Псевдоэлементы имеют значительные недостатки по сравнению с "реальными" DOM-узлами:

  • Они не могут быть переведены или анимированы.
  • Вы не можете динамически изменять свой внешний вид с помощью Javascript
  • Они гораздо менее важны для поисковых систем.
  • Они громоздки, когда дело доходит до отладки
  • Их число ограничено одним :before и одним элементом :after
  • Они не могут содержать HTML-теги, например ссылки или дополнительные контейнеры.
  • Вы нарушили концепцию разделения контента и внешнего вида.
  • Некоторые элементы HTML не могут иметь псевдоэлементы

Подробнее читайте в Tag-Wiki

Я уверен, что их больше. С другой стороны, это своего рода повышение производительности, которое, я считаю, будет незначительным.