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