如何对 jQuery Mobile iOS/Android Web 应用程序进行性能调优

Question

我一直在使用 JQM 开发一个针对 iOS 和 Android 设备的网络应用程序。在开发开始的大部分时间里，我已经在桌面上使用 Chrome（当前为 v13）进行了开发和测试。随着我们越来越接近我们的产品发布截止日期，我增加了对物理 iOS 和 Android 硬件的测试；桌面和移动浏览体验之间的性能差异是巨大的。

客户端/服务器交互非常简单。客户端请求一组视图，服务器返回。然后，客户端可以请求与特定视图关联的节点集，服务器将在单个有效负载中返回这些节点。然后，客户端根据相应的 XML 为每个节点生成 DOM。

我已经开始使用大于或等于 400kb 的 XML 负载进行测试。在桌面上，在 Chrome 中，这不是问题。在移动设备上，在 Mobile Safari 中，仅我的 DOM 加载时间就可以接近 12 秒。与 DOM 的交互（触发对 XML 的更新，缓存在 localStorage 中）每次点击最多可能需要 5 秒。

虽然我可以想出六种不同的方法来优化我的客户端/服务器通信，但我不知道如何衡量来自移动客户端的单个方法调用的开销。我知道 400k 有效负载对于 iOS Mobile Safari 来说太多了，但我不知道我所招致的性能成本是来自遍历 DOM 还是操作 XML。

如何从移动客户端的角度对我的移动网络应用进行指标分析？对桌面进行性能调整并没有让我得到任何帮助，而且我在移动端没有等效的开发者控制台/FireBug。

其他移动开发者如何解决这个问题？

Answer 1

我决定添加一个简单的开始/停止记录按钮，它调用一个记录函数，该函数将方法计时数据存储在 sessionStorage 中。在停止记录时，我将其发送到 Web 服务以通过桌面浏览器进行分析。

编辑：我确实按照this SO post 尝试了 JsLitmus，但我得出的结论是，在移动设备上真正重要的唯一性能测试是执行任何特定功能的时间。将这些信息从客户端导出后，性能调整就变得微不足道了。

Answer 2

1. 我不知道 JQM 使用哪种 XML 解析器，但如果它使用 DOM 样式解析器，性能肯定会受到影响。移动客户端可以更好地处理拉式解析器（它们占用的内存较少）。在 native 客户端中对 XML 的 DOM 样式解析确实很慢，我敢打赌在浏览器中它会更慢。
2. 400 KB 的 XML 听起来确实是一大块数据。您真的需要同时满足所有这些需求吗？
3. 繁重的 DOM 操作从来都不便宜，我预计移动设备的性能会受到很大影响。

我想这并不能真正回答你的问题，但只是放在评论中已经很长了。