ホームページへのいくつかのボタンを含む1つのアプリケーションを作成しました。そのボタンのいずれかをクリックすると、アプリケーションは、JQMカレンダー、テキストフィールド、ボタン、データベースなどを含むJQMフォームを含むビューにリダイレクトします。
私の質問は、その時間にAndroidデバイスでアプリケーションをテストすると、画像やより多くのスペースを含む可能性のあるデータを使用していなくても、アプリケーションの動作が少し遅くなることです。これが私の最初のクエリであり、2番目のクエリは、そのときにAndroidタブレットでアプリケーションをテストしたときに、そのフォームページがしばらく表示され、突然ホームページに自動的にリダイレクトされる一方で、この同じ機能がAndroidフォンでうまく機能することです。
なぜこの奇妙な問題？
誰かが私を案内してくれるなら、それは私の喜びになるでしょう
パフォーマンスの低下とリダイレクトの問題について推測することは困難です。以下に、HTML5、CSS3、JavaScriptで構成されるモバイルアプリケーションのパフォーマンスに影響を与えるいくつかの側面を示します。これらの側面は、分析、設計、および開発段階で考慮する必要があります。
サイズに基づく実施方法
小さなモバイルアプリケーションを開発するときは、内部AJAXページリンクを使用して単一のHTMLページを使用することをお勧めします。大規模なモバイルアプリケーションの場合、内部AJAXリンクを使用してさまざまなHTMLページを使用する方法をお勧めします。再利用可能なページテンプレートを作成してみてください。
ページ遷移
jQM 1.1.1 Docsに記載されているように、デフォルトでは、フェードを除くすべてのトランジションに3D変換のサポートが必要です。3Dをサポートしていないデバイスは、指定されたトランジションに関係なく、フェードトランジションにフォールバックします。jQMはこれを実行して、Android 2.xのようなパフォーマンスの低いプラットフォームを高度な移行からプロアクティブに除外し、スムーズなエクスペリエンスを維持できるようにします。Android 3.0など、技術的に3D変換をサポートしているが、アニメーションパフォーマンスが低いプラットフォームがあるため、すべてのブラウザが100％ちらつきがないことを保証するものではないことに注意してください。上記を考慮して、使用する遷移タイプを決定します。
JSおよびCSSファイルを縮小する
各ページは可能な限り軽量にする必要があります。ミニファイの目標は、全体的なバイトフットプリントを削減しながら、コードの運用品質を維持することです。YUI Compressor、Minifyなど、WEB上で利用できるツールはたくさんあります。さらに、JavaScriptソースコードがコーディング規則に準拠しているかどうかをチェックするために使用されるJLintのようなツールがあります。JLintJavaScriptコードの問題をチェックするコード品質ツールです。報告された問題は必ずしも構文エラーではありませんが、構造上の問題である可能性があります。JLintは、コードが正しいことを証明しないことに注意してください。それを支援ツールと考えてください。CSS最適化を実行するためのツールもあります。最適化は、CSSファイルのサイズを小さくし、コードをより適切に記述できるようにするのに役立ちます。CleanCSSやCSSTidyなどの多くのCSSオプティマイザーがWEBで利用できます。
コンポーネントの制限
大多数のモバイルWebブラウザーで最適なキャッシュの利点を得るには、HTMLページを25kbに制限することをお勧めします。キャッシュ制限は、OSのバージョンによって異なります。たとえば、Android2.1のキャッシュ制限は約2Mbです。
HTML5とCSS3
読みやすく、拡張して再利用可能なコードを作成してみてください。HTML5とCSS3の使用を最大限に活用することが重要です。HTML5 DocType宣言（<!DOCTYPE html>）は、HTML5ドキュメントでhtmlタグの前に最初に配置する必要があります。これは、ページがどのバージョンのHTMLで記述されているかについてのWebブラウザへの指示です。
W3CmobileOKチェッカーを使用する
W3C mobileOK Checkerは、W3Cによる無料のサービスであり、Webドキュメントのモバイル対応のレベルをチェックし、特にWebドキュメントがmobileOKであるかどうかを確認するのに役立ちます。すべてのテストに合格すると、WebページはmobileOKになります。テストは、mobileOK BasicTests1.0仕様で定義されています。。Webドキュメントのモバイル対応をチェックすることが本当に重要である理由を理解するには、いわゆるモバイルの世界についていくつかの点を強調する価値があります。通常のデスクトップコンピュータと比較すると、モバイルデバイスは一見制限されていると見なすことができます。画面サイズが小さい、処理能力が小さい、メモリの量が少ない、マウスがないなどです。固定データ接続と比較すると、モバイルネットワークは低速であり、多くの場合、待ち時間が長くなります。コンピューターの前に座っているユーザーと比較すると、外出中のユーザーは時間が限られており、気が散りやすいです。これらの制約に加えて、モバイルの世界は非常に細分化されています。さまざまなデバイスがあり、それぞれがサポートされている機能の独自のセットを定義しています。
さまざまな画面サイズでの外観を検討してください
さまざまな画面サイズをターゲットにする場合は、画面密度、ビューポートサイズ、およびWebページのスケールを考慮する必要があります。ビューポートメタデータを使用して、ビューポートサイズを定義できます。ここで、ビューポートは、ページが描画されるコンテナ領域です。ビューポートスケールは、Webページに適用されるズームレベルを定義します。target-densitydpiビューポートプロパティとCSS、JS手法を使用して、Webページのターゲット画面密度を変更できます。さまざまな画面サイズでの外観に関する記事は、WEB上にたくさんあります。
遅延が発生する可能性のあるフローを特定する
PageSpeed Firefox / Chrome拡張機能を使用して、ページの速度を確認できます。ページ速度を使用してWebページをプロファイリングすると、ページがさまざまなルールに準拠しているかどうかが評価されます。これらのルールは、Web開発のどの段階でも適用できる一般的なフロントエンドのベストプラクティスです。この拡張機能は、ルールを最適に実装し、それらを開発プロセスに組み込む方法に関する具体的なヒントと提案を提供します。
これがお役に立てば幸いです。