クライアント側で jQuery Mobile を使用し、サーバー側で PHP と MySQL を使用して Web アプリケーションを開発しています。このアプリケーションは、Safari、Chrome、Firefox などのデスクトップ ブラウザでうまく機能します。ただし、アプリケーションがホーム画面から Web クリップとして開かれる 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">2 つのボタン ( ) を含むコントロール グループ ( ) があり<a data-role="button">ます。 - ヘッダーの 1 つのボタンは、ページをリンク先にプリフェッチするように設定されています (
<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">) です。
まあ、それは私が考えることができるすべての「特別な」ものです。もっと知りたい、またはソースコードを見る必要がある場合は、私に知らせてください。