1

初めての HTML5 + jquery.mobile Web アプリを作成しています。アプリは基本的に、同じ index.html で定義された内部ページ (data-role="page") にリダイレクトするメニューです。- 実質的に - 同じ <head> のリロードと書き換えを避けるために、ページを外部ファイルとして書きません: 新しいページをロードするよりも内部タグにジャンプする方が速いと思います...

現在、特定の jquery プラグインと特定の css を必要とするページがあります。これらのプラグインや css を必要とするページは他にありません。

もちろん、これらの js/css をメインの <head> セクションにロードすることもできますが、この方法では最初のページのロードが遅くなり、役に立たなくなります。

次の方法で、CSS の問題を解決できます。

$('head:first').append('<link rel="stylesheet" type="text/css" href="' + file + '" />');

私はJSで問題を解決することさえできましたが、次のような「標準」JavaScriptの場合のみです。

<script>
    $(document).ready(function() {
        $('#page-availability').live('pageinit', function () {
            $.getScript("js/jqm-datebox.core.js");
            $.getScript("js/jqm-datebox.mode.calbox.js");
            $.getScript("js/jquery.mobile.datebox.i18n.en.utf8.js");

            $('#datepicker').data({
                "mode": "calbox",
                ...
            });
            ...
        });
        ...
    });

残念ながら、このアプローチは機能しないようです (firebug croaks: "TypeError: a.mobile.datebox is undefined"...) jquery プラグイン: それらは評価されていないようです... (それらが存在する場合でも、終了前に) <head> セクションの「生成されたソース」で表示...)。

Firefox (15) を使用してデバッグしていますが、これは重要ではないと思います...

ヒントはありますか？

4

4 に答える 4

3

1ページのアプローチは、次の場合にモバイルに適しています。

  1. ユーザーがその1ページから表示する可能性のあるすべてのコンテンツをサポートするために、余分なコンテンツをあまりロードする必要はありません。
  2. すべての動作をサポートするために、あまり多くのコードをロードする必要はありません。
  3. 通常のユーザーは実際にいくつかの異なる仮想ページにアクセスするため、このスキームにより読み込み時間が節約され、後続の仮想ページの読み込みが速くなります。

うまくやれば、ユーザーは最初のページをロードするときにOKのパフォーマンスを得ることができ、ネットワーク経由で新しいコンテンツをロードする必要のない他の「埋め込まれた」ページに移動するときに非常に速いパフォーマンスを得ることができます。

次の場合、1ページのアプローチはあまり良くありません。

  1. ロードする必要のあるものの量が多いため、初期ロード時間はそれだけの価値があります。
  2. とにかく、サブページのコンテンツを動的にロードする必要があります。
  3. 検索エンジンがすべての仮想ページを実際に検索/適切にインデックス付けできないため、SEOの問題が発生します。

したがって、最終的には、これは実際のトレードオフであり、ものの大きさ、ロードするものの数、および実際のパフォーマンスがどうなるかに大きく依存します。コンパクトなモバイルサイトは、ページが非常に軽量に保たれ、各ページで満たす必要のあるリクエストが非常に少ない場合、サーバーがロードしたページビューをあるページから次のページに非常に迅速に提供できます。

一般に、次のタイプの最適化を追求する必要があります。

  1. すべてのJavaScriptを圧縮/縮小します。
  2. ロードする必要のある個別のアイテム（スタイルシート、JavaScriptファイル、画像）の数を減らします。
  3. ロードする必要のあるシーケンシャルなものの数を減らします（1つをロードし、ロードされるのを待ち、もう1つをロードします）。モバイルは、往復や大量のリソースの読み込みが苦手です。いくつかのものをロードしても問題ありません。
  4. ブラウザがjavascriptファイルを簡単にキャッシュできるようにします。それぞれが多くのページのニーズを満たすいくつかの一般的なjavascriptファイルを使用します。最初にもう少しロードしてから、将来のすべてのページのロードでjavascriptファイルをキャッシュからロードできるようにするのが方法です。ユーザーがサイトの連続する多くのページにアクセスする場合は、はるかに優れています。同じことが外部CSSファイルにも当てはまります。
  5. 小さな画像であっても、たくさんの画像に非常に注意してください。ページをロードするための多くのhttpリクエストは、モバイルでのロード時間に悪影響を及ぼし、リクエストするすべての画像はhttpリクエストです（ブラウザのキャッシュからのものでない限り）。
  6. サーバーが、効果的にキャッシュできるもののブラウザーキャッシュを最大化するように構成されていることを確認してください。

その他の注意事項：

  1. デフォルトでは、スクリプトファイルの動的ロードは非同期で順序付けされていません。スクリプトファイルを特定の順序で実行する必要がある場合は、スクリプトファイルを動的にロードしないか、実行を目的の順序でシリアル化するコードを作成する（またはライブラリを使用する）必要があります。
于 2012-08-30T21:41:30.080 に答える
1

これは、古いFlashアセットの読み込みの問題とそれほど変わりません。

そのための私の戦略は？最初のページビューに必要なものだけをロードします。ロードされ、ページ/アプリがユーザーに表示されたら、他のすべてのアセットを段階的にロードします。

アセットが特に重い場合は、必要なアセットが読み込まれるまで、その特定のページへのリンクを無効にします。

この場合、最初に特定のページへのリンクを無効にし、そのアセットのロードを開始し、準備ができたらリンクを有効にすることができます。

構文に問題があるかどうかはわかりませんが、正しいソースを使用して新しいスクリプト要素をヘッドに挿入するだけで、ダウンロードが開始されます（cssで行っているように。ただし、おそらく; D ）。

乾杯

于 2012-08-30T21:40:55.567 に答える
1

$.getscript は省略形の AJAX 関数で、2 番目のパラメーターとしてコールバックを受け取ります。ドキュメントをチェックしてください: http://dochub.io/#jquery/jquery.getscript

これらのスクリプトを連結して、コールバックで処理を行うことができます。

于 2012-08-30T21:39:35.870 に答える
0

すべてのJSを1つのファイルに結合/縮小して圧縮し、常にそれをロードします。これは（正しいキャッシュを使用して）一度だけダウンロードされるものなので、パフォーマンスについてあまり心配する必要はありません。

もちろん、メインセクションでこれらのjs/cssをロードすることもできます

</body>andタグの直前に追加することがよくあります。また、非推奨.live()であるという事実に加えて、それは地獄のように遅いことにも注意してください。したがって、使用しないで、を使用してください。.on()

于 2012-08-30T21:41:15.190 に答える