jQuery 移动应用程序的性能问题

Question

我使用 phonegap 和 jQuery mobile 构建了一个相当大的应用程序。我有大约 5 个页面，其中一个 HTML 页面（根据 jQuery mobiles 导航系统）都共享一个主 JS 文件，该文件有 3400 行 JS 代码。

该应用程序在开发期间运行速度较慢，我想知道将应用程序拆分为单独的 HTML 文件并将它们加载到 DOM 是否会有所不同？

其次，是否也值得拆分 javascript，以便当前仅加载页面上需要的 javascript？

我应该准备好在设备上加载的全部 3400 行代码吗？还是在页面中注入所需的 JS？

Answer 1

是的，正如 Nathan 所说，我想你已经知道答案了。

我绝对建议将您的应用程序拆分为单独的 HTML 页面和 JavaScript，并仅在需要时加载 JavaScript。我听说人们推荐一种单页架构方法，尽管不同之处在于 HTML 页面和 JavaScript 是在需要时注入和加载的。

有关正确实施单页架构的更多信息，请参阅PhoneGap tutorial 中的第 4 部分。

一开始就将所有内容都加载到内存中并不是一个好主意……这是对资源的低效使用——正如您从缓慢的性能中看到的那样。

拥有单独的 HTML 和 JavaScript 文件也应该更容易管理和理解。

Answer 2

在 jquery 移动页面 DOM 中加载了太多数据〜（列表视图中的 250 条记录）之后。导航系统传输非常缓慢。我尝试了很多技巧，但没有成功。最后，通过应用以下技巧，我获得了出色的导航性能。

1. 尝试更改页面时尝试从 DOM 中删除/隐藏填充的数据。
2. 返回页面时。重新填充它。