title: Should I enhance Jquery Mobile elements on the client or send enhanced markup with data-enhance="false"?
body: <p>I have a product search where I'm sending back results with each result containing a two button JQM controlgroup.</p>
  
  <p>I'm sending 24 records at a time, so this will be 24 controlgroups to enhance, like so:</p>
  
  <pre><code>&lt;div data-role="controlgroup" data-type="horizontal" class="submitButton linkBox"&gt;
      &lt;input type="button" class="singleLoader" data-brand="#d#" data-index="#e#" value="#tx#" /&gt;
      &lt;input type="button" class="selector" data-brand="#d#" data-index="#e#" data-iconpos="notext" data-icon="fav" value="#tx#" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I send the controlgroups as plain HTML and enhance them on the client, server response is <code>1sec</code>, data send <code>20k</code>, and the page noticably stalls for about another 1-2 seconds, presumable because JQM is busy enhancing the controlgroups.</p>
  
  <p>I'm now trying the alternative, which is </p>
  
  <pre><code>  $.mobile.ignoreContentEnabled = true;
  </code></pre>
  
  <p>and sending the fully enhanced markup instead of the controlgroup. So now I'm sending this:</p>
  
  <pre><code>&lt;div data-enhance="false" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal"&gt;
       &lt;div class="ui-controlgroup-controls"&gt;
             &lt;div data-icon="" data-iconpos="" class="ui-btn ui-corner-left ui-btn-up-c" aria-disabled="false"&gt;
                  &lt;span class="ui-btn-inner ui-corner-left"&gt;
                       &lt;span class="ui-btn-text"&gt;#tx#&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;input type="button" value="#tx#" class="ui-btn-hidden" aria-disabled="false"&gt;
        &lt;/div&gt;
        &lt;div data-icon="fav" data-iconpos="notext" title="#tx#" class="ui-btn ui-btn-icon-notext ui-corner-right ui-controlgroup-last ui-btn-up-c" aria-disabled="false"&gt;
             &lt;span class="ui-btn-inner ui-corner-right ui-controlgroup-last"&gt;
                  &lt;span class="ui-btn-text"&gt;#tx#&lt;/span&gt;
                  &lt;span class="ui-icon ui-icon-fav ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;
             &lt;/span&gt;
             &lt;input type="button" value="#tx#" data-icon="fav" data-iconpos="notext" class="ui-btn-hidden" aria-disabled="false"&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>which increase transfered size to <code>34k</code> and response time to <code>1.5sec</code>, but the page feels noticabley faster, because there is nothing to enhance. However I also read that using <code>data-enhance=false</code>, this is a performance hit on devices.</p>
  
  <p><strong>Question:</strong><br>
  Does anyone else have experience on how to handle this? Should I opt for large file size/transfer time/performance hit, if the page feels faster?</p>