嵌套的ng-repeat性能优化

Question

我听说在Angular中嵌套使用ng-repeats会严重影响性能，特别是当其中有大量带有Angular表达式的元素时。实际上，我在编写某些代码时遇到了这种情况。我尝试使用bindonce来提高性能，但效果不太好。我听说可以使用指令来提高性能，但虽然我以前写过指令，但我不知道如何使用指令来改善这种情况下的性能。这里是一个jsfiddle示例，演示了这个问题。

我意识到这是很多数据，而且我应该做一些分页处理，但我正在努力学习Angular和性能。如果不使用Angular，我可以呈现相同的数据，页面渲染速度会更快。

以下是嵌套的ng-repeats的样子：

<div ng-app="app" ng-controller="myController">
<div ng-repeat="module in modules">
    {{module.title}}
    <div ng-repeat="clip in module.clips">
        {{clip.title}}<br/>
        <a ng-repeat="transcript in clip.transcripts" href="transcript.href">{{transcript.text}}</a><br/>
    </div>
</div>

谢谢！

- Jim Cooper

---

我认为你没有发布你的fiddle。 - Keith

AngularJS 性能优化：即使有大量 DOM 元素，也有多种方法可以提高性能 - David Lin

抱歉，更新了问题以显示代码片段。 - Jim Cooper

在阅读了@DavidLin的重复帖子后，我仍然觉得自己没有一个很好的解决方案。我应该指出，我的问题不是关于页面加载后的性能，而是关于页面渲染的性能。如果我使用除Angular之外的其他东西来渲染页面，它可以在不到一秒钟的时间内渲染完毕。但是使用Angular需要几秒钟的时间。 - Jim Cooper

@JimCooper：我也遇到了完全相同的问题。你能告诉我是否找到了解决方法，例如指令吗？ - Roy M J

Answer 1

尝试使用track by，这样可以确保DOM节点不会被销毁和重新创建！以下是Ben Nadel关于此主题的一篇优秀文章：http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm。

- user1119167

Answer 2

我找到了如何做到这一点，并且确实有了显著的改进。我用一个指令替换了内部的ng-repeat，生成了链接，性能明显更好。这是更新后的fiddle。

更新后的指令如下：

appModule.directive('transcripts', function() {
    return {
        restrict: 'A',
        scope: {
            transcripts: '='
        },
        compile: function(element) {
            element.removeAttr('transcripts');
            return  function(scope, element, attrs) {
                for(var i = 0; i < scope.transcripts.length; i++) {
                    var link = '<a href="' + scope.transcripts[i].href + '" _target="_new">' + scope.transcripts[i].text + '</a>';
                    element.append(link);
                }
            }
        }
    }
});

- Jim Cooper

---

问题在于对于转录所做的更改不会显示出来。如果这没关系，而且你只需要一次绑定，那么你应该使用angular-once（https://github.com/tadeuszwojcik/angular-once）。 - beardedlinuxgeek

bindonce和angular-once有什么不同？ - Jim Cooper

你可以使用bindonce，这样就没什么问题了。我只是在说，你所做的与只使用bindonce相比没有任何优势。 - beardedlinuxgeek