Question

我有一个产品搜索，我发回结果，每个结果包含一个双按钮JQM控制组。

我一次发送24条记录，所以这将是24个控制组来增强，如下所示：

<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正在忙于增强控制组。

我现在正在尝试替代方案，这是

  $.mobile.ignoreContentEnabled = true;

并发送完全增强的标记而不是控制组。所以现在我发送这个：

<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">&nbsp;</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，这对设备造成了性能损失。

问题：
有没有其他人有如何处理这个的经验？如果页面感觉更快，我应该选择大文件大小/传输时间/性能命中吗？

Answer 1

确定。基本上有三种选择。我用Firebug运行每一个来检查文件大小/加载时间和由于渲染项目导致的视觉停顿。

a）按原样
我正在加载一个列表视图，我的24个搜索结果中的每一个都是列表项，每个列表项都有一个双按钮控制组。

1 listview
24 list items
24 two button controlgroups

将标记略读为基本内容，我收到20k，大约1sec发送结果，但随后页面在所有项目之前视觉停止了大约1-2秒创建

b）data-enhance = false
这还需要设置$.mobile.ignoreContentEnabled=true，因为JQM表示对data-enhanced的扫描是性能损失（请参阅here）。我无法注意到。

这样做意味着你必须自己增强你需要的东西（在我的服务器端），所以我发送完全增强的标记（注意：你也可以尝试删除数据属性，因为它们似乎只是指示JQM，分配什么类等。）

现在我的搜索在35k中返回了1.5sec，但页面渲染速度要快得多，所以感觉好多了。

c）不加强
我还在使用trigger('create')来发送我发送的东西。但是，如果我不需要在元素上激活create来增强它们，因为我已经增强了服务器端，我不需要data-enhance=false和全局配置，这也可以节省隐含的性能。

原来这也很好用。文件大小仍然相同，我相信它会更快（希望这是可测量的）......

所以现在我更愿意发送更多数据（40k，包括分页和增强的listview / listitems），它似乎反应灵敏得多。

仍然很好奇其他人的经历，所以请发布你发现的内容。

Answer 2

如果我正确理解JQM的渐进增强，那么目标是能够使用这种客户端方法适应客户端的服务平台（优雅降级：jQuery and dynamic elements vs display css attribute）。如果您在服务器端渲染所有内容，则需要为不同平台提供增强型标记，或者您只能支持一个平台：从中复制增强标记的平台。

如果您要求后者，例如要仅从XY版本支持Android Chrome浏览器，这样可以获得性能，如果不是，它可能会变得乏味。

我目前面临同样的性能问题，因为增强了多达60个表单元素，在桌面上需要1秒，而在Nexus 4上需要6秒，这是难以忍受的。在尝试提供增强的标记之前，我想分享这些想法。我们还需要支持Windows Mobile 8和iOS7平台，这就是我犹豫的原因。

我应该在客户端增强Jquery Mobile元素还是使用data-enhance =“false”发送增强型标记？

2 个答案: