etiqueta - pseudo clases css

¿Es el uso de contenido generado por CSS(es decir, pseudo elementos) más eficiente(es decir, analizado/procesado más rápido) que la adición de más elementos DOM?

Question

Para mantener mi aplicación web móvil eficiente y eficiente, intento limitar la cantidad de elementos en el DOM en cualquier momento. Una forma en la que pretendo limitar el uso de elementos DOM es mediante el uso de los elementos pseudo :before y :after para generar contenido siempre que sea posible.

Por ejemplo, en lugar de representar un elemento de lista con metadatos como este:

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

Podría representarlo así (y usar el content: propiedad para mostrar los metadatos):

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

Por lo tanto, un elemento DOM con atributos de datos en lugar de 5 elementos separados y, posiblemente, un marcado más limpio.
Demostración aquí: http://jsfiddle.net/quc8b/2/

¿Esta técnica realmente mejorará el rendimiento? Mi idea es que con menos elementos de DOM JavaScript debería analizar más rápido y debería poder agregar / eliminar los nodos de lista de elementos más rápido. Pero, ¿la representación (es decir, pintura, diseño y reflujos) se producirá más rápido? En otras palabras, ¿el contenido generado por CSS se procesa / analiza más rápido o más eficientemente que los elementos tradicionales y los nodos de texto?

La forma en que los navegadores manejan internamente el contenido generado por CSS en el árbol de renderizado y el árbol de documentos es algo que desconozco (¿sombra DOM quizás?). ¿Hay algún artículo que discuta esto?

Answer 1

Tenga en cuenta que esta respuesta se dio hace años . Muchas de las declaraciones enumeradas a continuación ya no son válidas. El uso de pseudo-elementos todavía se desaconseja cuando se sirve contenido que debe ser accesible.

No sé sobre el rendimiento de los pseudo-elementos, pero me preocupa que pongas el rendimiento por encima de todo lo demás.

Los pseudo-elementos tienen desventajas considerables cuando se los compara con los DOM-Nodes "reales":

• No pueden ser transicionados o animados
• No puedes cambiar su apariencia dinámicamente con Javascript
• Son mucho menos "importantes" para los motores de búsqueda
• Son engorrosos cuando se trata de depurar
• Su número está restringido a uno :before y :after elemento
• No pueden contener etiquetas HTML, por ejemplo enlaces o contenedores adicionales
• Heriste el concepto de separación de contenido y apariencia
• Algunos elementos HTML no pueden tener pseudo elementos

Para leer más, ver Tag-Wiki

Estoy seguro de que hay más. Por otro lado, hay algún tipo de aumento del rendimiento, que creo que será insignificante.