JSON配列ウェブサイトが遅くなりました。 AngularJS

Question

私は配列を取得するために、AJAXを使用してMVSプロジェクトを持っている... 次は、基本的に私はIEnumerableを

public partial class VW_Suppliers 
{ 
    public int SupplierID { get; private set; } 
    public string Name { get; private set; } 
    public int SolarNumber { get; private set; } 
    public bool TpiClassification { get; private set; } 

    public int ValueStreamID { get; private set; } 
    public string ValueStream { get; private set; } 

    public int StatusID { get; private set; } 
    public string Status { get; private set; } 

    public string SupplierCode { get; private set; } 
    public int PurchaseSystemID { get; private set; } 
    public string PurchaseSystem { get; private set; } 

    public int AddressID { get; private set; } 
    public int AddressTypeID { get; private set; } 
    public string AddressType { get; private set; } 
    public string Street1 { get; private set; } 
    public string Street2 { get; private set; } 
    public string PoBox { get; private set; } 
    public string City { get; private set; } 
    public string PostalCode { get; private set; } 
    public int StateID { get; private set; } 
    public string StateCode { get; private set; } 
    public string State { get; private set; } 
    public int CountryID { get; private set; } 
    public string CountryCode { get; private set; } 
    public string Country { get; private set; } 
} 


    [HttpGet] 
    public ActionResult GetSuppliersData() 
    { 
     JsonObject jsonObject; 
     IEnumerable<ViewSupplierVM> suppliers = _supplierService.GetAllSuppliers(); 

     JsonResult jsonResult = Json(suppliers, JsonRequestBehavior.AllowGet); 
     jsonResult.MaxJsonLength = int.MaxValue; 

     return jsonResult; 
    } 

を引っ張る...私は19,500レコードのリストを取得する... C＃の上で私のクラスであります

しかし、私は2つのことに気付きました...ブレークポイントを使用すると、私がリターンした後に気付きました...データが受信されたときにAngularJSがブレークポイントに達するのに約10秒かかります。 2つ目の問題は、ページがすべてのデータで準備ができているときは...サイト全体がかなり遅いことです。たとえば、テキストボックスに入力すると、入力後0.5秒から4秒の間にすべてが表示されます。その19,500要素の配列が多くのメモリを消費していると信じてください。

すべてのサプライヤは最初の画面に表示される必要がありますので、この要件を回避する方法はありません。

ヒント？フロントエンドに速く送信し、サイトが遅くならないようにするために、MVCコントローラで実行できるトリックは何ですか？

Answer 1

19,000を読み込んでレンダリングすることは決して私にとって実行可能ではありません。私も、顧客がすべての製品（15,000以上）を管理できるようにする必要のあるアプリケーションに取り組んできました。最初の実装は、thisの回答が本当にうまく解決したページネーションを使用して行われました。しかし、より洗練された解決策は、私がngInfiniteScroll（https://sroze.github.io/ngInfiniteScroll/）を使用した、infinite-scrollメカニズムのいくつかのタイプを実装することです。これで問題の一部が解決されました。これは大量のHTMLレンダリングのためにページが遅くなっていますが、1ショットでサーバーから19,000アイテムを取得することは決して良い考えではありません。データベースには非常に大きなストレスがかかるだけでなく、ライブサーバーでホストされている場合は、データの要求が行われるとかなりの遅延が見られます。一度にデータを20,30,100ずつ引き出すことをお勧めします。このためmyPagingFunctionからngInfiniteScrollまでは実装するだけの適切な場所にする必要があります。