我和我的团队一直致力于使用 RhoMobile + JqueryMobile + KnockoutJS 为我们的组织构建多个跨平台（BlackBerry、Android、iOS）移动应用程序。考虑到当今跨平台移动应用程序开发的状态，开发经验是可以接受的。当在移动设备本身上使用该应用程序时，挫败感开始出现。性能问题是我们目前的头号痛点。我不希望这成为咆哮，但我想知道其他人为缓解性能问题做了什么。具体来说，黑莓设备的性能问题。我试过solutions recommended in the RhoMobile docs。也许社区可以提供其他提示。感谢您提供的任何反馈。
【问题讨论】：
标签： android blackberry ios5 jquery-mobile rhomobile
我只有 Jquery mobile 方面的经验，虽然我喜欢它带来的快节奏开发，但如果我有时间，我总是会编写一个原生应用程序。由于 Safari 的 CSS3 支持，Jquery 移动应用程序在 iOS 设备上运行得最好。像幻灯片等动画在 Android 浏览器上非常不稳定，而在黑莓浏览器上则完全粗制滥造。
除此之外，Jquery mobile 基本上从不切换页面。每次您请求一个新页面（通过超链接或其他方式）时，它都会通过 AJAX 请求获取该页面并将其插入到当前页面的 DOM 中（您可以明确要求不要发生这种情况，但是您不能“滑动”到另一个页面页）。这种形式的导航在经过漫长的导航链后会引起问题。更不用说，您必须非常小心，整个应用程序中的两个元素不能共享相同的 id。
我制作了这个 Jquery 移动应用程序作为学校项目的演示，因此它满足了我需要的目的：快速开发并作为概念证明。
但是，对于我自己公司的产品，我们正在开发移动应用程序，除了本机应用程序之外，我绝不会使用其他任何东西。开发确实需要更长的时间，因此取决于您的要求。
补充您的评论：
Jquery Mobile 所做的任何事情都不能由 Jquery 单独完成。但是，使用 jquery，如果您添加 CSS3 动画、使用单 DOM 导航样式等，您将遇到同样的问题。问题不在于 Jquery mobile。问题是，很少有移动浏览器可以处理 Jq mobile 采用的效果。就像我说的，iPhone 做得很好。这部分是因为 Safari 3 的 CSS 3 实现，主要是因为 iOS 将 UI 线程优先于后台工作线程。
【讨论】：
box-shadow 和 text-shadow，这会使页面变慢。-hover 和-down 类设置为与其派生类相同，以便在滚动时点击元素（如listview 链接）时浏览器不必重绘页面（这让我的 Android 2.3 设备上的滚动更加流畅）。去除阴影：
.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
}
要使-hover 类相同，您需要像这样更改样式：
.ui-btn-hover-a {
border: 1px solid #000 ;
background: #444444 ;
font-weight: bold;
color: #fff ;
text-shadow: 0 -1px 1px #000 ;
background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 ));
background-image: -webkit-linear-gradient( #666 , #444 );
background-image: -moz-linear-gradient( #666 , #444 );
background-image: -ms-linear-gradient( #666 , #444 );
background-image: -o-linear-gradient( #666 , #444 );
background-image: linear-gradient( #666 , #444 );
}
与它的导数相同（在本例中为.ui-btn-up-a）：
.ui-btn-hover-a {
border: 1px solid #222 ;
background: #333333 ;
font-weight: bold;
color: #fff ;
text-shadow: 0 -1px 1px #000 ;
background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 ));
background-image: -webkit-linear-gradient( #555 , #333 );
background-image: -moz-linear-gradient( #555 , #333 );
background-image: -ms-linear-gradient( #555 , #333 );
background-image: -o-linear-gradient( #555 , #333 );
background-image: linear-gradient( #555 , #333 );
}
您也可以对-down 类执行此操作，这些类在元素上发生tap 事件时触发：
.ui-btn-down-a {
border: 1px solid #222 ;
background: #333333 ;
font-weight: bold;
color: #fff ;
text-shadow: 0 -1px 1px #000 ;
background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 ));
background-image: -webkit-linear-gradient( #555 , #333 );
background-image: -moz-linear-gradient( #555 , #333 );
background-image: -ms-linear-gradient( #555 , #333 );
background-image: -o-linear-gradient( #555 , #333 );
background-image: linear-gradient( #555 , #333 );
}
这里是非缩小版 jQuery Mobile 1.0 CSS 样式表的链接：http://code.jquery.com/mobile/latest/jquery.mobile.css
【讨论】：