1

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.

1
  • Hey so we experienced the same issue in our app not too long ago. We reduced the work on the client by building that html with the table on our server side and our server would return the html table containing all of the information and just render that html on the client side(ng-bind-html). May not be the best but it certainly sped up our IE performance significantly. We encountered the problem when rendering 1000s of rows. The delay in IE seemed to be caused when angular was binding the rows in the ng-repeat. Commented Jan 10, 2018 at 19:25

1 Answer 1

1

You can improve the performance in this example a bit by defining the {{item.test}} statement as one time binding: {{ :: item.test}} This will cause AngularJs from NOT watching changes anymore.

1
  • 1
    This is something I did in our real application and I think it helped a small amount. It wasn't enough to make the application usable though. Thanks
    – jeynny
    Commented Jan 11, 2018 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.