0

私は現在、ページを一度にすべてではなくセクションにロードできるようにするために、コントローラーアクションをAjaxリクエストに変換しようとしています。変更を加える前に、ページは約8秒で読み込まれました（多くの情報を処理する必要があります）。

ajaxを介して部分ビューをロードするように変更したため、ページが同じ情報をロードするのに約35秒かかります。

プロセスは次のとおりです。

  • 最初のリクエストは、ビューモデル（ジェネリックリスト）を処理してからjsonとして返します。
  • 次に、返されたデータを使用して2つの部分ビューを作成します

jqueryをより速く動作させるためにレイアウトするより良い方法があるかどうか疑問に思います。渡されるデータの量が要因になる可能性があることは承知しています。デバッガーでオブジェクトの正確なサイズを見つけることはできませんが、jsonをテキストファイルにダンプすると約70kbになります。

jQuery

$.ajax({
    type: 'GET',
    dataType: "json",
    url: '@Url.Action("GetMapDetails")',
    success: function (data) {
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetMapItems")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#mapContainer").html(result);
            }
        });
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetAreaPoints")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#areaPointsContainer").html(result);
            }
        });
    }
});

コントローラ

public JsonResult GetMapDetails()
{
    List<ViewModel> vm = new List<ViewModel>();

    //create viewmodel here 

    return Json(vm.ToArray(), JsonRequestBehavior.AllowGet);
}
public ActionResult GetMapItems(List<ViewModel> list)
{
    return PartialView("_MapItemsPartial", list);
}

public PartialViewResult GetAreaPoints(List<ViewModel> list)
{
    return PartialView("_AreaPointsPartial", list);
}

誰かが最適化のアドバイスを提供できれば、それは素晴らしいことです

4

4 に答える 4

0

あなたの目標は、必要なときにのみ部分ビューをロードできるようにすることだと思うので、それらをすべて 1 つのマークアップ文字列に入れることはできません。

あなたが抱えているパフォーマンスの問題は、おそらく、サーバーから結果ストリームをロードするよりも、ajax 呼び出しの方が実際にはパフォーマンスが高くつくという事実によるものです。

キャッシュは、同じデータを同じページに取得する場合にのみ役立ちます。あなたの場合もそうではありません。

私には、初期ビューをユーザーにロードし、すぐに必要になるビューのバックグラウンドでのプリロードをすぐに開始する必要があるように思われます。それらを分割できない要素として DOM に配置するだけで、要求されるとすぐに読み込まれます。もちろん、すぐに必要になる可能性が最も高いものだけをプリロードします。

他のおそらくより効果的な方法は、KnockoutJS などのクライアントで MVVM フレームワークを使用することです。サーバーがモデルを使用して部分ビューをレンダリングする実際の必要なしに、単純な html マークアップでビューを定義します。これにより、html の転送が高速になります。クライアントからの別の REST 呼び出しは、サーバーからモデル データのみを JSON 形式で取得し、データ バインディングをビュー (以前に読み込んだ軽量の html) に適用します。このようにして、重いレンダリングの負担がクライアントにかかり、サーバーは長期的により多くのクライアントにサービスを提供できるようになります + パフォーマンスが向上する可能性が最も高くなります.

于 2012-08-22T09:33:06.447 に答える
0

Stackexchange Miniprofilerをインストールし、それをデータベース リクエストにもフックします。これにより、最も時間がかかっているビットを見つけることができます。サーバー上でのデータと処理である可能性が高いと思います（コントローラーの作成方法によっては、AJAXバージョンでデータのロードとプロセスを4回実行し、ページのロードが4回になる可能性があります）。

これが当てはまる場合、ページを AJAX 化しても問題は解決されませんが、処理されたデータをサーバーにキャッシュします (最新の状態に保つには、キャッシュ期間を短くするか、データを更新するプロセスでキャッシュを削除するかを選択します)。 、正しい答えはあなたのデータが何であるかによって異なります）。

于 2012-08-22T10:01:58.097 に答える
0

部分的なビューを文字列にレンダリングすることを検討できます。そうすれば、 から両方の HTML 文字列を返すことGetMapDetailsができ、3 回ではなく 1 回の AJAX 呼び出しで同じ結果を得ることができます。

また、ビューモデルを前後にシリアル化する必要がなくなると、パフォーマンスが向上する可能性があります。

于 2012-08-22T09:21:45.450 に答える
0

また、$.ajaxキャッシュオプションを true に使用して、 jQuery ajax メソッドのさらなる呼び出しを改善してみてください

情報が速く変化しないと、パフォーマンスが向上すると思います。

たとえば、7 ～ 8 個のプロットを非同期にロードする統計ページで作業していると、キャッシュによって多くの時間を節約できます。

jQuery API から:

jQuery API から。

一方、投稿されたデータの内容が急速に変化する場合、それをキャッシュすることはお勧めしませんが、すべてのブラウザーがその要求を独自のキャッシュにキャッシュすることも考慮してください。ブラウザのキャッシュを回避するには、$.ajax が自動的に行うのと同じように、すべてのリクエストでタイムスタンプをクエリ文字列として使用します。

于 2012-08-22T09:23:33.713 に答える