JQM 1.4.5 how to pre-enhance radio buttons group?

JQM 1.4.5 how to pre-enhance radio buttons group?

I'm using jQuery 1.11.0 together with Mobile 1.4.5.

Most of the load time in my pages is spent to enhance JQM Radio buttons. After some performance tests, i noticed that providing pre-rendered markup as advised in the JQM documentation will speed-up my pages, and effectively i was able to reduce the render time of this pages to 25% of the original.

This is my markup:

  1. <div class="ui-field-contain" data-enhance="false">
  2.     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all ui-mini">
  3.         <div role="heading" class="ui-controlgroup-label">
  4.             <legend>Pre-enhanced Quantity:</legend>
  5.         </div>
  6.         <div class="ui-controlgroup-controls">
  7.             <div class="ui-radio ui-mini">
  8.                 <label for="AOPTQ0" class="ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-radio-off">0</label>
  9.                 <input type="radio" id="AOPTQ0" name="AOPTQ" value="0" />
  10.             </div>
  11.             <div class="ui-radio ui-mini">
  12.                 <label for="AOPTQ1" class="ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-btn-active ui-radio-on">1</label>
  13.                 <input type="radio" id="AOPTQ1" name="AOPTQ" value="1" checked="checked" />
  14.             </div>
  15.         </div>
  16.     </fieldset>
  17. </div>

Now i'm having trouble with these pre-enhanced Radio buttons, e.g. the underlying value is set correctly, but the ui-state is not initialized and  also not updated when the radio button is clicked.

I tried also to set the initial checked attribute, and to set the initial ui-btn-active class, but without success. Moreover, i noticed that also the data-cacheval is not set.

EDIT : when i use following markup, the radio group behaves fine, but the load time is average between 90% and 95% of the original.

  1.     <div class="ui-field-contain">
  2.         <fieldset data-role="controlgroup" data-enhanced="true" data-type="horizontal" data-mini="true" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all ui-mini">
  3.             <div role="heading" class="ui-controlgroup-label">
  4.                 <legend>Pre-enhanced Quantity:</legend>
  5.             </div>
  6.             <div class="ui-controlgroup-controls">
  7.                 <div class="ui-radio ui-mini">
  8.                     <label for="AOPTQ0" class="ui-btn ui-corner-all ui-btn-inherit ui-first-child">0</label>
  9.                     <input type="radio" data-enhanced="true" id="AOPTQ0" name="AOPTQ" value="0" />
  10.                 </div>
  11.                 <div class="ui-radio ui-mini">
  12.                     <label for="AOPTQ1" class="ui-btn ui-corner-all ui-btn-inherit ui-last-child">1</label>
  13.                     <input type="radio" data-enhanced="true" id="AOPTQ1" name="AOPTQ" value="1" checked="checked"/>
  14.                 </div>
  15.             </div>
  16.         </fieldset>
  17.     </div>

Maybe i have not fully understand  what pre-rendered markup is for...can someone kindly explain which is the right way to provide pre-rendered markup for JQM radio groups?

How much shall be the expected average load time gain by providing pre-rendered markup? It would be nice if someone has some test results to share.

http://jsfiddle.net/UZwpj/165/