I am experiencing performance issues in IE11 with an AngularJS (v1.5.8) application. As data is rendered in an ng-repeat, IE11 becomes jumpy and will even freeze temporarily. Chrome is able to render the HTML with no issues.
I have setup a simple example here on Plunker.
<!DOCTYPE html>
<html ng-app="app" ng-controller="MainController">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.gray {
background-color: #aaa;
}
</style>
</head>
<body>
<span class="fa fa-spin fa-spinner fa-5x"></span>
<table>
<tr ng-repeat="item in arr track by $index" ng-class="{'gray': $index % 2 == 0}" ng-show="$index % 5 != 0">
<td>{{item.set}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
<td><input type="checkbox" />{{item.test}}</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
//Angular module
var app = angular.module('app', []);
//Controller
app.controller('MainController', function ($scope, $timeout) {
//array for holding dummy data to display in ng-repeat
$scope.arr = [];
//How much data do we want?
for (var i = 1; i < 100; i++) {
//Add to arr on a delay to simulate web service response time
$timeout(function (index) {
//Add 20 more array items at a time
var nextSet = [];
for (var j = 0; j < 20; j++) {
nextSet.push({ 'set': index, 'test': 'abc' });
}
$scope.arr = $scope.arr.concat(nextSet);
}, i * 50, true, i); //50 is too short in IE 11 and causes freezing. 500 works fine.
}
});
</script>
</body>
</html>
In the example, the data is added to the array on a delay using $timeout. In my real application, the data is added as web services return data. Changing the timing in the example from 50 to 500 resolves the problem in IE11. I don’t think I can apply a similar workaround to the real application since I don’t know how quickly the web services will return.
Is there anything I can change in my AngularJS app to make IE11 perform better? I don’t expect it to be as slick as Chrome is, but I expect it to be better than it is.