performance - iPad上的jQuery Mobile非常慢

我正在客户端使用jQuery Mobile开发一个Web应用程序，PHP＆amp; MySQL在服务器端。该应用程序适用于Safari，Chrome和Firefox等桌面浏览器。但是，在iPad上 - 应用程序在主屏幕上作为Web剪辑打开 - 应用程序执行得更糟。滚动工作正常，但点击链接从服务器加载页面的速度非常慢。

iPad屏幕的录制显示（例如）点击之后需要0.3秒才会突出显示点按的元素并显示加载程序。从开始起1.0秒后，打开/显示打开页面的下半部分（在加载器下方）。然后在显示页面的上半部分之前需要另外0.6秒，这使得加载页面所需的总时间为1.6秒。可以找到显示此过程的视频（以原始速度的25％播放）here。

我知道加载页面（通过WiFi）需要一些时间，但我不明白为什么渲染页面的上半部分需要额外的0.6秒。假设页面在1.0秒后完全加载（因为页面的下半部分已经显示），我认为这也花费了相当多的时间，因为在我的Mac上Safari只需要大约0.5秒。但这可能是因为我的iPad处理器速度较慢以及WiFi连接滞后。

希望有人知道一些（客户端）优化，以使应用程序更快地执行（或感觉）。我已经在jQuery Mobile中禁用了动画，我将尝试自己优化服务器端。

也许这些事情很重要：

我从服务器返回的所有页面都有一个完整的<head>，其中包含多个引用的样式表和脚本。 jQuery Mobile是否会忽略<head>或节省这种处理能力？
我在大多数网页上都有固定的页眉和页脚。我正在使用<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">来完成此任务。页眉和页脚也包含在所有页面中。
大多数标题左侧有一个按钮（<a data-role="button">标签），中间有一个标题（<h1>标签），右侧有一个控制组（<div data-role="controlgroup">），其中包含两个标题按钮（<a data-role="button">）。
标题中的一个按钮设置为将页面预取到其链接的位置（<a href="…" data-role="button" data-rel="dialog" data-prefetch>）。此按钮包含在每个页面中，但链接的href在每个页面上都相同。 这可能是......？
所有页脚都有一个导航栏（<div data-role="navbar">），其中包含多个项目（<li><a>）。
某些页面是具有过滤功能的列表视图（<ul data-role="listview" data-filter="true">）。目前只包含几个项目（<li><a>，最多5个）和列表分隔符（<li data-role="list-divider">）。
其他页面是包含列表视图的表单（<form>）（<ul data-role="listview" data-inset="true">），其中包含多个表单字段（<li data-role="fieldcontain">）。

嗯，这些都是我能想到的“特殊”事物。如果您需要了解更多或查看一些源代码，请告诉我们。

iPad上的jQuery Mobile非常慢

2 个答案: