Question

我在使用AngularJS（v1.5.8）应用程序的IE11中遇到了性能问题。由于数据以ng-repeat的形式呈现，IE11会变得浑浊，甚至会暂时冻结。 Chrome可以毫无问题地呈现HTML。

我设置了一个简单示例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>

在该示例中，使用$ timeout将数据添加到数组中。在我的实际应用程序中，数据作为Web服务返回数据添加。将示例中的时间从50更改为500可以解决IE11中的问题。我不认为我可以对实际应用程序应用类似的解决方法，因为我不知道Web服务的返回速度有多快。

我的AngularJS应用程序中有什么可以改变以使IE11表现更好吗？我不希望它像Chrome一样光滑，但我希望它比它更好。

Answer 1

通过将{{item.test}}语句定义为一次绑定，您可以稍微提高此示例中的性能：{{ :: item.test}} 这将导致AngularJs不再观看更改。

AngularJS的IE11性能问题

1 个答案: