admin管理员组文章数量:1194180
Currently I have a very sublte problem to solve with IE11 and AngularJS.
My page consists of two nested ng-repeat to create a tabset with a table inside any tab.
Here the code:
In the code, each application's object have around 1.000 item's related objects. With a Chrome, Safari and Mozilla I have no problem, all is superfast! With IE11 the page go slow and IE11 show me the message of a too slow page's script....
I've created an IE11 interface's profiling with this result: .png?dl=0
Is this another IE11's bug??? Sorry for my English and thanks in advance for any suggestion.
Edit: Currently (for "debug" purpose) I removed all td's content... the IE11 is still too slow. :(
<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>
Currently I have a very sublte problem to solve with IE11 and AngularJS.
My page consists of two nested ng-repeat to create a tabset with a table inside any tab.
Here the code: http://pastebin.com/0fffPz5Z
In the code, each application's object have around 1.000 item's related objects. With a Chrome, Safari and Mozilla I have no problem, all is superfast! With IE11 the page go slow and IE11 show me the message of a too slow page's script....
I've created an IE11 interface's profiling with this result: https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png?dl=0
Is this another IE11's bug??? Sorry for my English and thanks in advance for any suggestion.
Edit: Currently (for "debug" purpose) I removed all td's content... the IE11 is still too slow. :(
<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>
2 Answers
Reset to default 20AngularJs has limits for rendering bindings per page (In some articles you can find that it is around 2000 bindings). Currently you've just faced this situation. The reason why chrome and Mozilla work smoothly is that DOM operations for them are optimized better. In order to improve your performance try to:
- avoid using sort in ng-repeat (sort it before insertions)
- Use one-time bindings (:: syntax)
- Remove unnecessary watches
- Optimize digest cycles
- Use pagination
- Replace angularjs ng-repeat with ReactJs components (in case of really big amount of data)
Just ran into this same problem. Had everything working perfectly on Chrome, then tested in IE and it kept crashing with anything over 1000 records.
I ended up following this link to add a "lazy load" or "infinite scroll" to my table. So on table load it still pulls all 1000+ records, but instead of loading this data directly into the table, I load it into a big array, then just subset my table of say 50 records. Then create a directive that listens to the scroll on the table, and when it's near the bottom then fire off a function which just adds the next 50 records from the big array into my table array. Here's a direct link to the fiddle from the link above.
HTML
<tbody when-scroll-ends="loadMoreRecords()">
<tr ng-repeat="row in tableData">
<td>{{row.attribute}}</td>
</tr>
</tbody>
Module
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);
}
});
}
};
});
Controller
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]);
}
}
}
本文标签： javascriptIE11 slowfreeze with AngularJS39s ngrepeat renderingStack Overflow
版权声明：本文标题：javascript - IE11 slowfreeze with AngularJS's ng-repeat rendering - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738488738a2089580.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
:: expression. And what about paging? Nobody can view that much data... – hgoebl Commented May 25, 2015 at 18:24