Jquery 移动应用程序奇怪的行为
Posted
技术标签:
【中文标题】Jquery 移动应用程序奇怪的行为【英文标题】：Jquery Mobile Application Strange Behaviour 【发布时间】：2012-08-14 15:51:42 【问题描述】：我创建了一个应用程序，其中包含几个主页按钮单击其中一个按钮我的应用程序重定向到包含 JQM 表单的某个视图，其中包含 JQM 日历、文本字段、按钮和数据库等......
我的疑问是，当我在 android 设备上测试我的应用程序时，应用程序的运行速度有点慢，即使我没有使用任何图像或任何可以包含更多空间的数据。这是我的第一个查询，第二个查询是，当我在 Android 平板电脑上测试我的应用程序时，该表单页面出现了一段时间，然后突然自动重定向回主页，而同样的功能也适用于 android 手机。
为什么会出现这个奇怪的问题？
如果有人可以指导我，那将是我的荣幸
【问题讨论】：
什么版本的jQuery Mobile？什么版本的PhoneGap？到目前为止，您为尝试修复做了什么？能不能展示一些代码，比如JS包含的顺序？ 【参考方案1】：很难对性能缓慢和重定向问题做出假设。以下是我认为影响 html5、CSS3、javascript 组成的移动应用程序性能的一些方面，在分析、设计和开发阶段应予以考虑。
基于大小的实现方法
在开发小型移动应用程序时，建议使用使用内部 AJAX 页面链接的单个 HTML 页面。对于较大的移动应用程序，建议使用具有内部 AJAX 链接的不同 HTML 页面的方法。尝试创建可重复使用的页面模板。
页面转换
如jQM 1.1.1 Docs 中所述，默认情况下，除淡入淡出之外的所有过渡都需要 3D 变换支持。缺少 3D 支持的设备将退回到淡入淡出转换，无论指定的转换如何。 jQM 这样做是为了主动将 Android 2.x 等性能不佳的平台排除在高级转换之外，并确保它们仍然拥有流畅的体验。请注意，有些平台（如 Android 3.0）在技术上支持 3D 变换，但动画性能仍然很差，因此这并不能保证每个浏览器都 100% 无闪烁。在考虑上述情况后决定您将使用的过渡类型。
缩小 JS 和 CSS 文件
每个页面都应该尽可能的轻量级。缩小的目标是保持代码的操作质量，同时减少其整体字节占用。 WEB 上有很多可用的工具，例如YUI Compressor、Minify 等等。此外，还有像JLint 这样的工具，用于检查 JavaScript 源代码是否符合编码规则。 JLint 是一个代码质量工具，用于检查 JavaScript 代码中的问题。报告的问题不一定是语法错误，但可能是结构问题。请注意，JLint 并不能证明您的代码是正确的。将其视为一种帮助工具。还有一些用于执行 CSS 优化的工具。优化可帮助您获得更小的 CSS 文件大小和更好的编写代码。您可以在 WEB 上找到很多可用的 CSS 优化器，例如 CleanCSS 和 CSSTidy。
组件限制
建议将 HTML 页面限制为 25kb，以便为大多数移动网络浏览器获得最佳缓存优势。缓存限制因操作系统版本而异。例如，Android 2.1 的缓存限制约为 2Mb。
HTML5 & CSS3
尝试创建易于阅读、可扩展和可重用的代码。充分利用 HTML5 和 CSS3 的使用非常重要。 HTML5 DocType 声明 (<!DOCTYPE html>) 应该是 HTML5 文档中 html 标记之前的第一件事。它是对 Web 浏览器的指示，说明页面是用什么版本的 HTML 编写的。
使用W3C mobileOK Checker
W3C mobileOK Checker 是 W3C 的一项免费服务，可帮助检查 Web 文档的移动友好程度，特别是断言 Web 文档是否可移动。一个网页在通过所有测试时是可移动的。测试在 mobileOK Basic Tests 1.0 specification 中定义。要理解为什么检查 Web 文档的移动友好性真的很重要，可能有必要强调关于所谓的移动世界的几点。与普通的台式电脑相比，移动设备乍一看可能会被认为是有限的：屏幕尺寸更小、处理能力更小、内存更小、没有鼠标等等。与固定数据连接相比，移动网络可能很慢，并且通常具有更高的延迟。与坐在电脑前的用户相比，忙碌的用户时间有限，容易分心。除了这些限制之外，移动世界还高度分散：许多不同的设备，每个设备都定义了一组独特的受支持功能。
考虑不同屏幕尺寸的外观
在定位不同的屏幕尺寸时，应考虑屏幕密度、视口尺寸和网页的比例。视口元数据可用于定义视口大小，其中视口是绘制页面的容器区域。视口比例定义了应用于网页的缩放级别。 target-densitydpi 视口属性和 CSS、JS 技术可用于更改网页的目标屏幕密度。网上有很多关于不同屏幕尺寸外观的文章。
识别可能延迟的流
PageSpeed Firefox/Chrome extension 可用于检查页面速度。当您使用 Page Speed 分析网页时，它会评估该网页是否符合许多不同的规则。这些规则是您可以在 Web 开发的任何阶段应用的一般前端最佳实践。该扩展提供了有关如何最好地实施规则并将其纳入开发过程的具体提示和建议。
我希望这会有所帮助。
【讨论】：
谢谢你的回答对我很有帮助，在我们开发跨平台应用程序时考虑到这一切真的很好。我也会把这个推荐给其他 phonegap 开发人员，以便他们也可以摆脱它。再次感谢您的好评。 我很高兴能帮上忙 :) 以上答案是个人意见，我的经验表明了这一点。也许其他人会考虑不同的性能方面。谢谢 我相信它涵盖并记录了使用 HTML5、CSS3 和 JavaScript 开发的移动应用程序的重要性能方面。谢谢你，我希望我的回答有帮助。 再次感谢，如果您有时间可以来chat.***.com/rooms/13436/smart-phones-developer 这个房间与我交谈，我将非常高兴，谢谢 是的，当然，我一有空就会加入聊天。谢谢以上是关于Jquery 移动应用程序奇怪的行为的主要内容，如果未能解决你的问题，请参考以下文章
jquery $.on() 和使用 date() 时处理奇怪行为的触摸事件
iOS 移动浏览器和 OS X Safari 上的 Flexbox 奇怪行为