現在、IE11とAngularJSで解決すべき非常に微妙な問題があります。
私のページは、任意のタブ内にテーブルを持つタブセットを作成するための2つのネストされたng-repeatで構成されています。
ここにコードがあります: http://Pastebin.com/0fffPz5Z
コードでは、各アプリケーションのオブジェクトには、約1.000個のアイテムの関連オブジェクトがあります。 Chrome、Safari、Mozillaを使えば問題ありません、すべてが超高速です! IE11を使用すると、ページが遅くなり、IE11はページのスクリプトが遅すぎるというメッセージを表示します。
この結果でIE11インターフェイスのプロファイリングを作成しました: https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png?dl=
これは別のIE11のバグですか?私の英語で申し訳ありません、そしてどんな提案にも前もって感謝します。
編集:現在(「デバッグ」の目的で)すべてのtdのコンテンツを削除しました... IE11はまだ遅すぎます。 :(
<tabset ng-show="!applicationsLoading">
<tab ng-repeat="application in applications track by application.name">
<tab-heading>
<em class="fa fa-clock-o fa-fw"></em> {{ application.name }}
</tab-heading>
<div>
<!-- START table responsive-->
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in application.items track by item.itemid">
<td></td>
<td></td>
<td>
</td>
<td></td>
<td></td>
<td>
</td>
<!-- Graph or History column -->
<td>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END table responsive-->
</div>
</tab>
</tabset>
AngularJsには、ページごとのバインディングのレンダリングに制限があります(一部の記事では、約2000のバインディングであることがわかります)。現在、あなたはこの状況に直面しています。 chromeとMozillaがスムーズに機能する理由は、それらのDOM操作がより適切に最適化されているためです。パフォーマンスを向上させるには、次のことを試してください。
これと同じ問題が発生しました。 Chromeですべてが完全に機能し、IEでテストしたところ、1000レコードを超えるとクラッシュし続けました。
このリンク をたどって、テーブルに「遅延読み込み」または「無限スクロール」を追加することになりました。したがって、テーブルのロード時に、1000以上のレコードすべてがプルされますが、このデータをテーブルに直接ロードする代わりに、大きな配列にロードしてから、たとえば50レコードのテーブルをサブセット化します。次に、テーブルのスクロールをリッスンするディレクティブを作成し、それが下部に近づいたら、大きな配列から次の50レコードをテーブル配列に追加する関数を起動します。これが直接 フィドルへのリンク 上記のリンクからです。
[〜#〜] html [〜#〜]
<tbody when-scroll-ends="loadMoreRecords()">
<tr ng-repeat="row in tableData">
<td>{{row.attribute}}</td>
</tr>
</tbody>
モジュール
angular.module(myApp, []).directive('whenScrollEnds', function () {
return {
restrict: "A",
link: function (scope, element, attrs) {
var processingScroll = false;
var visibleHeight = element.height();
var threshold = 200;
element.scroll(function () {
var scrollableHeight = element.prop('scrollHeight');
var hiddenContentHeight = scrollableHeight - visibleHeight;
if (hiddenContentHeight - element.scrollTop() <= threshold) {
// Scroll is almost at the bottom. Loading more rows
scope.$apply(attrs.whenScrollEnds);
}
});
}
};
});
コントローラー
function loadTableData() {
LoadDataService().getData().then(function(response) {
fullTableList = response.data;
$scope.tableData = fullTableList.slice(0,50);
});
}
function loadMoreRecords() {
// if there's still more than 20 records left, add the next chunk of 20
if (fullTableList.length - $scope.tableData.length > 20) {
$scope.tableData = $scope.tableData.concat(fullTableList.slice($scope.tableData.length,$scope.tableData.length + 20));
} else {
while ($scope.tableData.length < fullTableList.length) {
$scope.tableData.Push(fullTableList[$scope.tableData.length]);
}
}
}