对于 IE8 中的 2000 个元素，Angular ng-repeat 非常慢答案

【问题标题】：Angular ng-repeat very slow for 2000 elements in IE8对于 IE8 中的 2000 个元素，Angular ng-repeat 非常慢
【发布时间】：2014-07-20 00:54:55
【问题描述】：

我正在编写一个基于 Angular 的应用程序。它必须支持 IE8 :-( 当我在页面上有 2000 个双向绑定时，在 IE8 上加载页面非常慢，以至于浏览器实际上超时了。

下面是一个非常简单的页面来说明问题。它在 JavaScript（而不是 DOM）中创建一个包含 2000 个对象的数组，然后将该数组分配给作用域中的一个变量。

这在 IE9 和 Chrome 中运行良好。使用 500 个双向绑定，IE8 需要几秒钟。但是，在我的情况下，将页面上的双向绑定数量减少到少于 2000 个将非常困难。

非常感谢我可以在几秒钟内使用 IE8 加载 2000 个双向绑定的任何解决方案。

<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="perfModule">
<head>
    <script src="angular.min.js"></script>
    <script>
        function Phone(name, snippet) {
            this.name = name;
            this.snippet = snippet;
        }

        var perfModule = angular.module('perfModule', []);

        perfModule.controller('perfCtrl', function ($scope) {
            var phones = [];
            for (var i = 0; i < 2000; i++) {
                phones.push(new Phone('Nexus S', 'Fast just got faster with Nexus S.'));
            }
            $scope.phones = phones;
        });
    </script>
</head>
<body ng-controller="perfCtrl">
      <ul>
        <li ng-repeat="phone in phones">
            {{$index}}: <input ng-model="phone.name"> {{phone.name}} - {{phone.snippet}}
        </li>
      </ul>
</body>

【问题讨论】：

你真的需要所有的绑定，还是有一些值一旦不能改变就需要渲染？
你可能想看看无限滚动。
另外，2000 个元素和 2000 个绑定之间存在很大差异。此示例包含 6001 个绑定。
如果您受困于 IE8 合规性，您可能需要寻找另一个框架。另外，也许看看bindonce。另外，在您的 ng-repeats 上使用 track by

标签： angularjs angularjs-ng-repeat

【解决方案1】：

试试这个：

直接在 for 循环中使用 $scope.phones，而不是将其分配给新的电话数组。这可能会使数据更快地呈现到您的屏幕上。

【讨论】：