0

MVC 4.0、WebServices、RestFul、SQLServer 2008 R2、jQuery Mobile (1 ページ アプリ)、AJAX アーキテクチャを使用するデータ駆動型 Web アプリを作成しました。

ユーザーが [名前で検索] > [名前を参照] をクリックすると、ユーザー テーブル (および他のいくつかのデータ ルックアップ テーブル) からすべてのデータが取り込まれます。

このアプリは、Retina ディスプレイと通常のディスプレイ (1 つの大きなサイズの画像のみ) で使用するように設計されており、html でサイズを変更します。

問題は、この検索で​​約 400 レコードを返すのに 10 秒かかる場合があることですが、URI を使用すると約 2 秒しかかかりません。これは正常ですか?遅延読み込みは役に立ちますか? 以下のAJAXでこれをどのように実装できますか?

AJAX:

function getConsultants() {

    $.ajax({
        type: 'GET',
        async: false,
        url: 'http://31.222.187.42/hca-consulting/Farm/users',
        //url: 'json/get_consultants.txt',
        dataType: 'json',

        success: function (users) {

           hcaConsultants = users;

        },
    });
};
4

1 に答える 1

1

あなたの問題は次のとおりです。

  1. 最初のページ読み込みは 13.1MB になります (簡単です、トラ!)。明らかに、これに対処する必要があります。すべての PNG と JPEG をオプティマイザーで実行します。これは、Visual Studio のアドオンです。これを考慮すると、多くの PC では、ブラウザ プロセスの RAM 使用量が頭打ちになります。Chrome は 250MB に達し、Opera は 650MB 使用しました。これは、最初のページ読み込みで 171 のリクエストが発生する非常に重いページです。それは本当に高いです。画像にもスプライトを使用することを検討し、できるだけ多くを統合してください。パフォーマンスの違いは驚くべきものです。リクエストの数が多いほど、ページの効率が低下します。

  2. これらすべての画像をプリロードする必要は本当にありますか? あなたが言及した遅延ローダーまたは他の画像ローダーを適切に検討してください。

  3. ブラウズ名が呼び出されると、リクエストの数は HTTP スタック上で最大 548 の個々のアイテムになり、最大で 14.3MB になります (ただし、すべての画像リンクが壊れているため、それらを適切に取得したら、その時点で 30+MB になる可能性があるモバイル (Web またはインストール?) アプリケーションにとって、これは明らかに受け入れられません。

  4. これらのレコードを DOM に配信する速度を向上させるために、jQuery テンプレートについても検討することをお勧めします。さらに、美しく最小化された 8kb のウェイポイント プラグインのようなスクロール ロードを実装することもできます。これにより、下にスクロールするとより多くの JSON 結果がブラウザーに表示されます。一度に処理するレコードが少ないほど、ブラウザ内の効率と応答性が向上します。

  5. これをインストール済みのアプリとしてではなく Web 経由で配信する場合は、ここで大量のキャッシュが必要になります。両手を広げて受け入れてください。また、VS ビルド後のイベントと私のヒーローである Douglas Crockford のJSMinを使用するか、フレームワークに組み込まれたバンドルを使用して、ビルド時にすべての独自の Javascript を 1 つのファイルにバンドルおよび縮小することを検討してください。また、ライブラリの CDN。

本当にそれだけです。ページの読み込みが非常に遅いのは、リソースの重みでページがうなり声を上げているためです。そのため、API の JSON が直接要求されたときにすぐに戻ってくるのです。

これは、ページの速度と Yslow のスコアを比較するのに最適な Web サイトです。追加のヒントやコツについて、サイトの推奨事項が記載されたレポートを次に示します。この種のアプリでは、応答性と体感速度がすべてです。そのため、世界クラスのアプリにすることを応援しています。

これがお役に立てば幸いです。あなたのアプリで幸運を祈ります。

于 2013-08-17T02:41:07.050 に答える