title: Is the use of CSS generated content (i.e. pseudo elements) more efficient (i.e. parsed/rendered faster) than adding more DOM elements?
body: <p>In order to keep my mobile web app lean and efficient, I'm trying to limit the number of elements on the DOM at any given time. One way in which I intend to limit the use of DOM elements, is by using the pseudo <code>:before</code> and <code>:after</code> elements to generate content where possible.</p>
  
  <p>For example, rather than representing a list-item with metadata like this:<br></p>
  
  <pre><code>&lt;dd class="item"&gt;
      &lt;div class="name"&gt;Name&lt;/div&gt;
      &lt;div class="desc"&gt;Description&lt;/div&gt;
      &lt;div class="location"&gt;Location&lt;/div&gt;
      &lt;div class="genre"&gt;Genre&lt;/div&gt;
  &lt;/dd&gt;
  </code></pre>
  
  <p>I could represent it like this (&amp; use the <code>content:</code> property to display the metadata):<br></p>
  
  <pre><code>&lt;dd class="child" 
      data-name="Name" 
      data-desc="Description" 
      data-location="Location" 
      data-genre="Genre"&gt;
  &lt;/dd&gt;
  </code></pre>
  
  <p>So, one DOM element with data attributes as opposed to 5 separate elements and arguably cleaner markup.<br>
  Demo here: <a href="http://jsfiddle.net/quc8b/2/" rel="noreferrer">http://jsfiddle.net/quc8b/2/</a><br></p>
  
  <p>Will this technique actually improve performance? My thought is that with fewer DOM elements javascript should parse faster and I should be able to add/remove the list-item nodes faster. But will rendering (i.e. painting, layout, &amp; reflows) occur faster? In other words, is CSS generated content rendered/parsed faster or more efficiently than traditional elements and text nodes?</p>
  
  <p>How browsers internally handle CSS generated content in the render tree and document tree  is an unknown to me (shadow DOM maybe?). Are there any articles that discuss this?</p>