问题描述
我有一个产品搜索，我在其中发送回结果，每个结果包含两个按钮的JQM控件组.
I have a product search where I'm sending back results with each result containing a two button JQM controlgroup.
我一次发送24条记录，因此这将是需要增强的24个控制组，如下所示:
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>
如果我将控制组作为纯HTML发送并在客户端上进行增强，则服务器响应为1sec，数据发送为20k，并且该页面明显停滞了大约1-2秒，这大概是因为JQM正在忙于增强对照组.
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.
我正在尝试替代方法
$.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>
可以将传输的大小增加到34k，将响应时间增加到1.5sec，但是该页面的感觉明显更快，因为没有任何要增强的内容.但是我也读到使用data-enhance=false，这对设备的性能造成了影响.
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?
推荐答案
好.基本上有三种选择.我与Firebug一起运行，检查文件大小/加载时间以及由于渲染项目而导致的视觉停顿.
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)原样
我正在加载一个列表视图，其中24个搜索结果中的每一个都是列表项，每个列表项都有两个按钮控件组.
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
我将标记加到基本内容上，我收到20k，大约是1sec以发送结果，但是在创建所有项目之前，页面在视觉上又停滞了大约1-2秒.
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
这还需要设置$.mobile.ignoreContentEnabled=true，因为JQM表示扫描data-enhanced是对性能的打击(请参见此处).不过我真的没注意到.
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.
这样做意味着您必须增强自己需要的任何内容(在我的情况下是服务器端)，所以我要发送完全增强的标记(注意:您也可以尝试删除数据属性，因为它们似乎仅指示JQM，要分配的类等).
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.)
现在，我的搜索在1.5sec中返回了35k，但是页面渲染速度更快，因此感觉更好.
Now my search returned 35k in 1.5sec, but the page rendering was much faster so this feels much better.
c)不增强
我在发送的内容上仍使用trigger('create').但是，如果由于已经增强了服务器端而无需在元素上触发create来增强它们，则不需要data-enhance=false和全局配置，这也可以节省隐含的性能损失.
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)...
因此，到目前为止，我希望发送更多的数据(40k，包括分页和增强的listview/listitems)，而且响应速度似乎要快得多.
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.
这篇关于我应该在客户端上增强Jquery Mobile元素还是使用data-enhance ="false"发送增强的标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！