iPad上的jQuery Mobile非常慢
Jon*_*han 5 performance mobile-safari jquery-mobile
我正在使用客户端的jQuery Mobile和服务器端的PHP和MySQL开发Web应用程序.该应用程序适用于Safari,Chrome和Firefox等桌面浏览器.但是,在iPad上 - 应用程序在主屏幕上作为Web剪辑打开 - 应用程序执行得更糟.滚动工作正常,但点击从服务器加载页面的链接非常慢.
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">带有多个项目的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">).
嗯,这些都是我能想到的"特殊"事物.如果您需要了解更多信息或查看一些源代码,请告诉我们.
| 归档时间： |
|
| 查看次数： |
3235 次 |
| 最近记录： |