问题
I have a product search where I'm sending back results with each result containing a two button JQM controlgroup.
I'm sending 24 records at a time, so this will be 24 controlgroups to enhance, like so:
<div data-role="controlgroup" data-type="horizontal" class="submitButton linkBox">
<input type="button" class="singleLoader" data-brand="#d#" data-index="#e#" value="#tx#" />
<input type="button" class="selector" data-brand="#d#" data-index="#e#" data-iconpos="notext" data-icon="fav" value="#tx#" />
</div>
If I send the controlgroups as plain HTML and enhance them on the client, server response is 1sec, data send 20k, and the page noticably stalls for about another 1-2 seconds, presumable because JQM is busy enhancing the controlgroups.
I'm now trying the alternative, which is
$.mobile.ignoreContentEnabled = true;
and sending the fully enhanced markup instead of the controlgroup. So now I'm sending this:
<div data-enhance="false" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls">
<div data-icon="" data-iconpos="" class="ui-btn ui-corner-left ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">#tx#</span>
</span>
<input type="button" value="#tx#" class="ui-btn-hidden" aria-disabled="false">
</div>
<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">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">#tx#</span>
<span class="ui-icon ui-icon-fav ui-icon-shadow"> </span>
</span>
<input type="button" value="#tx#" data-icon="fav" data-iconpos="notext" class="ui-btn-hidden" aria-disabled="false">
</div>
</div>
</div>
which increase transfered size to 34k and response time to 1.5sec, but the page feels noticabley faster, because there is nothing to enhance. However I also read that using data-enhance=false, this is a performance hit on devices.
Question:
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?
回答1:
Ok. Basically there are three options. I ran every one with Firebug to check for files size/loading time and visual stall due to rendering items.
a) As is
I'm loading a listview with each of my 24 search results being list items, each with a two button controlgroup.
1 listview
24 list items
24 two button controlgroups
Skimming the markup to the essential stuff, I'm receiving 20k, about 1sec to send the results, but then the page visually stalls for about another 1-2 seconds before all items have been created.
b) data-enhance=false
This requires also setting $.mobile.ignoreContentEnabled=true as JQM says scanning for data-enhanced is a performance hit (see here). I couldn't really notice though.
Doing this means you have to enhance anything you need yourself (in my case server-side), so I'm sending fully enhanced markup (Note: you could also try and remove data-attributes as they seem to only indicate to JQM, what classes to assign etc.)
Now my search returned 35k in 1.5sec, but the page rendering was much faster so this feels much better.
c) don't enhance
I was still using trigger('create') on stuff I was sending. However if I don't need to fire create on elements to enhance them since I already enhanced server-side, I don't need data-enhance=false and the global config which would also save the implied performance hit.
Turns out this also Works well. File size is still the same and I believe it goes even quicker (wish this would be measureable)...
So for now I'm perferring to send more data (40k including the pagination and enhanced listview/listitems) and it seems to be much more responsive.
Still curious what experiences others have, so please post what you find.
回答2:
If I understand JQM's progressive enhancement correctly the aim is to being able to adapt to the served platform on client side using this client-side approach (graceful degradation: jQuery and dynamic elements vs display css attribute). If you render everything on server-side you either need to serve the enhanced markup for different platforms or you'll only be able to support one platform: The one you copied the enhanced mark up from.
If latter is your requirement, e.g. to only support Android Chrome browser from version XY, this is fine to gain performance, if not it might become tedious.
I'm currently facing the same performance issue due to the enhancement of up to 60 form elements which takes 1s on Desktop but 6s on a Nexus 4 which is unbearable. These are my thoughts which I want to share before trying out to serve enhanced markup. We need to also support Windows Mobile 8 and iOS7 platform which why I'm hesitating.
来源：https://stackoverflow.com/questions/12205787/should-i-enhance-jquery-mobile-elements-on-the-client-or-send-enhanced-markup-wi