ng-repeatはデータをレンダリングするのに時間がかかります

Question

私は既に同じ問題について多くの質問が掲載されていますが、私の場合は解決法はありません。

Webサービスを呼び出すと、JSON応答が返されます。このJSONには、テーブルにデータを表示する必要があるオブジェクトが2000以上あります。私はすべての（2000+）レコードをテーブルに表示したいと思います。はい、私は制限したり改ページすることはできません。単一のページに表示する必要があります（私はそれが愚かだと知っていますが、ソートや検索は必要ありません。

データ転送は約2MBで、リクエストは約2〜4秒で完了します。ページ上でのデータレンダリングには約10-15秒かかります。

私が探しているのは、スピードng-repeatバインディング（可能な場合）、またはデータを受信するとすぐにデータを表示し、すべての行が表示されるまで追加し続けることです。以下のコードアウト

チェック：

HTML

<table class="table table-bordered table-striped cf"> 
<thead style="color: #333;"> 
<tr> 
<td>Asset Name</td> 
<td>Date/ Time</td> 
<td>Location</td> 
<td>Ignition</td> 
<td>Speed</td> 
<td>Heading</td> 
<td>Direction</td> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="cols in tableData"> 
<td>{{ cols.aN }}</td> 
<td>{{ cols.dT }}</td> 
<td>{{ cols.Lat }}, {{ cols.Lon }}</td> 
<td>{{ cols.I }}</td> 
<td>{{ cols.S }}</td> 
<td>{{ cols.H }}</td> 
<td>{{ cols.D }}</td> 
</tr> 
</tbody> 
</table> 

JS

var ignition_text = ''; 
var lat = ''; 
var lon = ''; 
for (var i = 0; i < data.length; i++) { 
    if (data[i].ignition = 1) { 
     ignition_text = "On"; 
    } else { 
     ignition_text = "Off"; 
    } 
    $scope.$apply(function() { 
     $scope.tableData.push({ 
      aN: name, 
      dT: data[i].eventUTCTime, 
      Lat: data[i].latitudeDegrees, 
      Lon: data[i].longitudeDegrees, 
      I: ignition_text, 
      S: data[i].speedMPH, 
      H: data[i].longitudeDegrees, 
      D: data[i].latitudeDegrees 
     }); 
    }); 
} 

事前に

ありがとう！

Answer 1

おそらく$scope.$applyは必要ありません。必要な場合でも、すべてのデータをテーブルにプッシュするだけで使用してください。それ以外の場合、追加されたすべてのエントリはダイジェストサイクルを強制します。配列を作成し、完成した配列をscope-variableに代入するだけです。次に、角度はテーブルを一度しか構築しません。

変数nameの性質によっては、アレイの構築も排除して、ダウンロードしているデータを使用することができます。あなたはname以外にも、とにかくそのデータを使用します。

Answer 2

類似のデータサイズを持ちますが、はるかに速くロードするプランクですhttp://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Kaあなたが素早く大声を上げようとしていたら、私はあなたのデータを使用してコードを編集することができましたが、外見からは、データの適用なしでスコープへの主な割り当てが必要になり、ng-repeatにトラックを追加します。 SN：forループ内でデータを操作し、スコープへの割り当てを行いたいとします。

for (var i = 0; i < data.length; i++) { 
    if (data[i].ignition = 1) { 
     ignition_text = "On"; 
    } else { 
     ignition_text = "Off"; 
    } 
    } 
    $scope.tableData=data; 

JS

$http.get("largeData.json").then(function(response) { 
    vm.test = response.data; 
    }); 

HTML

<tbody> 
     <tr ng-repeat="(key, value) in main.test track by $index "> 
     <td>{{ value.ask }}</td> 
     <td>{{ value.bid }}</td> 
     <td>{{ value.volume_btc }}, {{ value.volume_percent }}</td> 
     <td>{{ value.last }}</td> 
     <td>{{ value.timestamp }}</td> 
     </tr> 
    </tbody>