我正在使用客户端的 jQuery Mobile 和服务器端的 PHP 和 MySQL 开发一个 Web 应用程序。该应用程序在 Safari、Chrome 和 Firefox 等桌面浏览器上运行良好。然而,在 iPad 上——应用程序作为网页剪辑从主屏幕打开——应用程序的性能要差得多。滚动工作正常,但点击链接从服务器加载页面会非常慢。
iPad 屏幕的记录显示(例如)在点击后需要 0.3 秒才能突出显示点击的元素并显示加载程序。从开始 1.0 秒后,打开页面的下半部分被渲染/显示(在加载器下方)。然后在页面上部显示之前需要另外 0.6 秒,使加载页面所需的总时间为 1.6 秒。可以在此处找到显示此过程的视频(以原始速度的 25% 播放) 。
我知道加载页面(通过 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">
)。
嗯,这些都是我能想到的“特别”的东西。如果您需要了解更多信息或查看一些源代码,请告诉我。