それは、パフォーマンスの低下やリダイレクト問題に関する仮定を作るのは難しいだろうということで私を導くことができます。以下は、私の意見ではHTML5、CSS3、JavaScriptで構成されるモバイルアプリケーションのパフォーマンスに影響を及ぼすいくつかの側面を見つけることができ、分析、設計、開発段階で考慮する必要があります。サイズに基づいて
実装方法は
小型モバイルアプリケーションに内部AJAXページのリンクを使用して、単一のHTMLページの使用方法を開発してお勧めします。大規模なモバイルアプリケーションでは、内部のAJAXリンクで異なるHTMLページを使用する方法が推奨されます。再利用可能なページテンプレートを作成してみてください。
ページ遷移
jQM 1.1.1 Docsで述べたように、デフォルトでは、フェードを除くすべての遷移は、3Dのサポートを変換する必要があります。 3Dサポートを持たないデバイスは、指定されたトランジションに関係なく、フェードトランジションに戻ります。 jQMは、Android 2.xのようなパフォーマンスの低いプラットフォームを先進的な移行から積極的に排除し、スムーズな体験を提供できるようにするため、これを行います。 3D変換を技術的にサポートしているAndroid 3.0などのプラットフォームはありますが、まだアニメーションのパフォーマンスが低いため、すべてのブラウザで100%のフリッカーフリーが保証されるわけではありません。上記を考慮して使用するトランジションタイプを決定します。
縮小化JSとCSSファイル
各ページには、可能な限り軽量でなければなりません。細分化の目標は、全体的なバイトフットプリントを削減しながら、コードの操作上の品質を維持することです。 YUI Compressor、Minifyなど多くのツールがWEBに用意されています。さらに、JLintのようなツールがあり、JavaScriptソースコードがコーディング規則に準拠しているかどうかを確認するために使用されます。 JLintは、JavaScriptコードの問題をチェックするコード品質ツールです。報告された問題は必ずしも構文エラーではありませんが、構造的な問題である可能性があります。 JLintはあなたのコードが正しいことを証明しません。それを支援ツールと考えてください。 CSS最適化を実行するためのツールもあります。この最適化により、CSSファイルのサイズを小さくしたり、コードを書いたりするのに役立ちます。 CleanCSSとCSSTidyなど、WEB上で利用可能な多くのCSSオプティマイザを見つけることができます。
コンポーネント
HTMLページを制限し、モバイルWebブラウザの大多数のための最適なキャッシングの利点を得るために25キロバイトに制限されることをお勧めします。キャッシュの制限は、OSのバージョンによって異なります。たとえば、Android 2.1のキャッシュ制限は約2Mbです。
HTML5 CSS3 &
は、読み拡張し、再利用可能なコード簡単に作成するようにしてください。 HTML5とCSS3を最大限に活用することが重要です。 HTML5 DocType宣言(<!DOCTYPE html>
)は、htmlタグの前にHTML5ドキュメントの最初のものにする必要があります。これは、ページがで書かれているHTMLのバージョンについては、ウェブブラウザに指示する。
W3C mobileOK Checkerは、Webのモバイル親しみやすさのレベルをチェックするのに役立ちますW3Cによって無料のサービスですW3C mobileOK Checker
を使用しますドキュメント、特にWebドキュメントがmobileOKであるかどうかを確認します。 Webページはすべてのテストに合格するとmobileOKです。テストはmobileOK Basic Tests 1.0 specificationで定義されています。モバイルドキュメントをチェックすることが本当に重要である理由を理解するには、いわゆるモバイルの世界についていくつかの点を強調する価値があります。通常のデスクトップコンピュータと比較して、モバイルデバイスは、一見して画面サイズが小さく、処理能力が小さく、メモリが少なくて済み、マウスがないなどの制限があるとみなされます。固定データ接続と比較して、モバイルネットワークは低速であり、しばしば待ち時間が長くなります。彼のコンピュータの前に座っているユーザと比較して、外出先のユーザは限られた時間しかなく、容易に気を散らす。これらの制約に加えて、モバイル世界は断片化しています。多くの異なるデバイスで、それぞれがサポートされている独自の機能セットを定義しています。
は異なるスクリーン上の外観は異なる画面サイズをターゲットにするときの画面密度とビューポートのサイズ及びウェブページの規模を考慮すべきである
のサイズを検討してください。ビューポートメタデータは、ビューポートサイズを定義するために使用できます。ビューポートは、ページが描画されるコンテナ領域です。ビューポートスケールは、Webページに適用されるズームレベルを定義します。 target-densitydpi viewportプロパティとCSS、JS技法を使用して、Webページのターゲット画面密度を変更することができます。さまざまな画面サイズでの外観に関するWEB上の記事はたくさんあります。
PageSpeed Firefox/Chrome extensionは、ページの速度をチェックするために使用することができ
潜在的な遅延を持つフローを識別します。 Page Speedを使用してWebページをプロファイルすると、さまざまなルールに対するページの適合性が評価されます。これらのルールは、Web開発のどの段階でも適用できる一般的なフロントエンドのベストプラクティスです。この拡張では、ルールを最適に実装し、開発プロセスに組み込むための具体的なヒントと提案を示します。
こちらがお役に立てば幸いです。
jQuery Mobileのどのバージョンですか? PhoneGapのどのバージョン?修正を試みるためにこれまで何をしていますか?あなたはいくつかのコードを表示することができます、例えば、JSの順序が含まれていますか? – Jasper