Angular 4アプリのブラウザのパフォーマンスに関する問題

Question

私はAngular 4アプリケーションの新機能で、数週間学習しています。環境はNode v6.11.0、NPM 3.10.10、Angular CLI 1.1.3、Typescript 2.2.2.0です。

複数のSQL Serverテーブルから直接取得したデータを表示します。私は140列と数千行のテーブルを持っています。私は最近、1000行ブロックでレコードを取得するページング機構をコーディングし、MS WebAPIバックエンドはこのデータをローカルのラップトップコンピュータで5秒以内にAngularアプリケーションに提供します。先週、データベースに大量の行を追加しました。以前は20レコードしかありませんでしたが、この少量の行にはパフォーマンス上の問題はありませんでした。

この角度アプリは、サービスを使用してhttp.getを使用してSQL Serverからデータを取得し、SQL Serverから行のjson配列にマップします。かなり基本的なもので、この点で問題はありません。

1000レコードの大きなブロックを表示すると、パフォーマンスが低下します。これは入力フィールドのない簡単な静的表示であり、ユーザーが表示されたデータを編集することはできません。 1000個の記録ブロックと

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th style="width:auto;" *ngFor="let column of columns"> 
       {{column}} 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of data"> 
      <td *ngFor="let column of columns">{{item[column]}}</td> 
     </tr> 
    </tbody> 

    <tfoot> 
    </tfoot> 
</table> 

は、30秒ほどした後、最初の1000枚のレコードとディスプレイをつかむことができIE 11チョークが、が、その後、次のブロックの上に、それだけで空白の画面が表示され、ブラウザが閉じられる必要があります。 Chromeはこれをはるかに上手く処理しますが、データが受信されてからレンダリングされるまでにはまだ大きな遅延があります。

私はIE11が50レコードブロックをこの特定のテーブルでかなりうまく処理していますが、50ブロックと100ブロックの間のどこかでIEが突き詰めます。残念ながら、私たちのクライアントは、ChromeやFirefoxではなくIEを使用したいと考えています。

私はStackOverflowでいくつかの同様の問題を発見しましたが、どれもこの問題の解決策を持っていませんでした。誰でもパフォーマンスを改善する方法を提案できますか？ Angularはバックグラウンドでどれくらいの処理をしているのかはまだ分かりませんが、これはデータの静的な表示であるためバインドする必要はありません。 Angularはデフォルトでバインドされていますが、何らかの理由でデータをレンダリングするのが遅れている可能性がありますか？

「トラックなし」を実装しようとしましたが、パフォーマンスに違いはありませんでした。

角度のある退役軍人が私に正しい方向を向けるために提供できるアドバイスをお待ちしています。

それはそんなに改善..しかし、[のinnerText]の代わりに{{}}の入れてみます場合、私は知らない

Answer 1

：

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th style="width:auto;" *ngFor="let column of columns" [innerText]="column"> 

      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of data"> 
      <td *ngFor="let column of columns" [innerText]="item[column]"></td> 
     </tr> 
    </tbody> 

    <tfoot> 
    </tfoot> 
</table> 

そして、もう一つの事...なぜしないでくださいあなたはpaginate結果を試す？

希望します。