2012-06-18 16 views
5

私は、クライアント側でjQuery Mobileを使用し、サーバー側でPHP &を使用してWebアプリケーションを開発しています。このアプリケーションは、Safari、Chrome、Firefoxなどのデスクトップブラウザでうまく機能します。しかし、ホーム画面からウェブクリップとしてアプリケーションが開かれているiPad上では、アプリケーションがさらに悪化します。スクロールは正常に動作しますが、サーバーからページをロードするリンクをタップするのは非常に遅くなります。jQuery MobileはiPadで非常に遅い

iPadの画面を記録すると、タップした後にタップした要素が強調表示されてローダーが表示されるまでに0.3秒かかることが示されます。開始から1.0秒後に、開いているページの下半分が表示されます(ローダーの下に表示されます)。その後、ページの上部が表示される前にさらに0.6秒かかるため、ページをロードするのに必要な合計時間は1,6秒になります。このプロセスを示すビデオ(元の速度の25%で再生)はhereです。

Loading process

私は(無線LAN経由)のページをロードすると、多少時間がかかることを理解しますが、ページの上半分をレンダリングすると、余分な0,6秒かかり、なぜ私は理解していません。ページの下半分がすでに表示されているため、ページが1.0秒後に完全に読み込まれたと仮定すると、私のMacのSafariで約0.5秒しかかからないので、かなり時間がかかると思う。しかし、これはiPadのプロセッサーが遅くなり、Wi-Fi接続の遅れが原因かもしれません。

誰かが(アプリケーション側で)最適化を行う(クライアント側の)最適化を知っていたらうまくいくと思います。私はすでに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">)の2つのボタン(<a data-role="button">)が含まれています。
  • ヘッダーの1つのボタンは、ページをリンク先にプリフェッチするように設定されています(<a href="…" data-role="button" data-rel="dialog" data-prefetch>)。このボタンはすべてのページに含まれていますが、リンクのhrefは各ページで同じです。 これは何かかもしれない..?
  • すべてのフッターには、いくつかの項目(<li><a>)を持つnavbar(<div data-role="navbar">)があります。
  • 一部のページはフィルタ機能(<ul data-role="listview" data-filter="true">)を持つリストビューです。現在のところ、わずか数アイテム(<li><a>、最大5)とディバイダ(<li data-role="list-divider">)が含まれています。
  • 他のページは、リストビューを含むフォーム(<form>)であり、複数のフォームフィールド(<li data-role="fieldcontain">)が含まれています(<ul data-role="listview" data-inset="true">)。

これは私が考えることができるすべての「特別な」ものです。もっと知りたい、あるいはソースコードを見る必要がある場合は、私に知らせてください。

+0

jQuery Mobileを使用して、社内Webアプリケーション開発フレームワークを開発しました。フレームワークとその結果のWebアプリケーションの両方で、パフォーマンスが非常に優れていたと言えるのはうれしいです。 これは私の考えにつながります。あなたのページには多くの処理が必要なことがありますか?あなたは見て、スポットアウトして、そのような部分を投稿することができますので、より良い外観を持つことができますか? – kishu27

+0

@ kishu27私のアプリケーションを説明するいくつかの技術的な詳細を追加しました。 – Jonathan

+0

私があなたの状況にあった場合、私はページレンダリングの一部を取り除いて(コメントして)、パフォーマンスに何が影響するかを見ていきます。あなたが言及したことは、#1を除いて私がやったことです。パフォーマンスには影響しません。 – kishu27

答えて

2

問題は(ほとんど)jQuery Mobile 1.1にアップデートすることで修正されました。そのバージョンには、パフォーマンス関連の修正/最適化が含まれていました。

2

long listviewsは非常に遅いです...ページを表示/表示している場合は、小さい番号の最初にliを追加し、小さなタイムアウト後に残りを追加してください。

+0

私のリストビューには現在、いくつかの項目が含まれています。私は考えているので、問題の原因ではないはずです。将来については心に留めておくべきことかもしれませんが、言及いただきありがとうございます! – Jonathan

関連する問題