3

我有一个产品搜索，我在其中发回结果，每个结果都包含一个两个按钮 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, data send 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，但页面感觉明显更快，因为没有什么可以增强的。但是，我也读到了 using data-enhance=false，这是对设备的性能影响。

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

4

2 回答 2

2

行。基本上有三种选择。我用 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会影响性能（请参阅此处）。不过我真的没注意到。

这样做意味着您必须自己增强您需要的任何东西（在我的情况下是服务器端），所以我发送了完全增强的标记（注意：您也可以尝试删除数据属性，因为它们似乎只向 JQM 表明，什么要分配的课程等）

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

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

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

所以现在我更愿意发送更多数据（40k包括分页和增强的列表视图/列表项），它似乎响应速度更快。

仍然好奇其他人有什么经验，所以请发布您的发现。

于 2012-09-01T08:23:27.587 回答
0

如果我正确理解 JQM 的渐进增强，其目的是能够使用这种客户端方法（优雅降级：jQuery 和动态元素与显示 css 属性）适应客户端的服务平台。如果您在服务器端呈现所有内容，您要么需要为不同平台提供增强标记，要么只能支持一个平台：您复制增强标记的平台。

如果后者是您的要求，例如仅支持版本 XY 的 Android Chrome 浏览器，那么这可以提高性能，否则可能会变得乏味。

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.

于 2014-01-30T10:54:37.257 回答