我应该在客户端增强Jquery Mobile元素还是使用data-enhance =“false”发送增强型标记?
我有一个产品搜索,我发回结果,每个结果包含一个两个按钮JQM控制组。
我一次发送24条记录,所以这将是24个控制组来增强,如下所示:
如果我将控制组作为纯HTML发送并在客户端上增强它们,则服务器响应为1sec
,数据发送20k
,并且页面显着停止大约1-2秒,这可能是因为JQM忙于增强控制组。
我现在正在尝试替代方案
$.mobile.ignoreContentEnabled = true;
并发送完全增强的标记而不是控制组。 所以现在我发送这个:
#tx#
它将传输大小增加到34k
,响应时间增加到1.5sec
,但页面感觉更快,因为没有什么可以增强的。 但是我也读到使用data-enhance=false
,这对设备来说是性能上的打击。
题:
有没有其他人有如何处理这个的经验? 如果页面感觉更快,我应该选择大文件大小/传输时间/性能吗?
好。 基本上有三种选择。 我用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
是一个性能$.mobile.ignoreContentEnabled=true
(见这里 )。 我无法注意到。
这样做意味着你必须自己增强你需要的东西(在我的情况下是服务器端),所以我发送完全增强的标记(注意:你也可以尝试删除数据属性,因为它们似乎只向JQM表明,是什么要分配的课程等)
现在我的搜索在1.5sec
返回35k
,但页面渲染速度要快得多,所以感觉好多了。
c)不要增强
我还在使用trigger('create')
来发送我正在发送的东西。 但是,如果我不需要激活元素来create
它们以增强它们,因为我已经增强了服务器端,我不需要data-enhance=false
和全局配置,这也可以节省隐含的性能。
事实certificate这也很好。 文件大小仍然相同,我相信它会更快(希望这是可测量的)…
所以现在我更愿意发送更多数据(包括分页和增强的listview / listitems在内的40k
),它似乎响应更快。
仍然很好奇他人的经历,所以请发布你发现的。
如果我正确理解JQM的渐进增强,那么目标是能够使用这种客户端方法(优雅降级: jQuery和动态元素与显示css属性 )适应客户端服务平台。 如果您在服务器端渲染所有内容,则需要为不同平台提供增强型标记,或者您只能支持一个平台:从中复制增强标记的平台。
如果后者是您的要求,例如仅支持版本XY的Android Chrome浏览器,则可以获得性能,如果不是,则可能会变得单调乏味。
我目前面临同样的性能问题,因为增强了多达60个表单元素,在桌面上需要1秒,而在Nexus 4上需要6秒,这是难以忍受的。 在尝试提供增强的标记之前,我想分享这些想法。 我们还需要支持Windows Mobile 8和iOS7平台,这也是我犹豫的原因。