Чтобы мое мобильное веб-приложение оставалось компактным и эффективным, я пытаюсь ограничить количество элементов в 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?). Есть ли статьи, в которых это обсуждается?
