Question

我已经阅读了很多关于如何提高ngRepeat性能的建议，但我仍然无法理解如何实现我的目标。我有这个模板：

<ul>
   <li ng-repeat="item in items">
     {{item.title}}
     <ul>
        <li ng-repeat="child in item.children">
          <a href="{{child.link}}">{{child.name}}</a>
          <some other heavy element that takes time to render>
        </li>
     </ul>
   </li>
 </ul>

我想要完成的是快速初始重复，只显示child.name，然后是一个单独的非阻塞操作（指令，Web工作者，延迟魔法，等等），用于处理重元素的呈现。通过这种方式，GUI保持活泼，<a>元素可以立即点击;同时，在后台，其他东西被加载到DOM中。

这可能吗？

Answer 1

您可以使用指令。该指令可以执行异步工作（如果可以的话，甚至可以使用工作程序）来显示其内容。

但是如果你必须在DOM中一次插入100000个html标签，你将永远冻结。这不是一个角度问题。浏览器无法处理。

Answer 2

渲染需要时间，完全停止。如果您处理大量内容，“无限滚动”可能是一个有用的搜索词。分页是另一种选择。无论哪种方式，你都需要限制你在任何时候要求Dom做的渲染量。

另一种方法是在初始$compile完成渲染后，通过触发ng-repeat ng-init上的事件并将ng-repeat重量级内容放入DOM中一个<heavy-content>指令，用于监听事件，准备将其内容编译到DOM中......

这是标记......

    <div ng-repeat="item in items" ng-init="ngRepeatReady()">
        <div>light content {{item}}</div>
        <heavy-content></heavy-content>
    </div>

...控制器，注意$timeout包裹$broadcast，这对于避免遗漏ng-repeat中的最后一项很重要...

app.controller('MyCtrl', function($scope, $timeout){

     $scope.items = [1,2,3,4,5,6];

     $scope.ngRepeatReady = function() {
         $timeout(function(){
            $scope.$broadcast('ngRepeatReady');
         });
     }

})

为了示例，

...带有$timeout的指令......

app.directive('heavyContent', function($timeout){
    return {
            template: '<p>loading...</p>',
            link: function(scope, element, attrs){
            scope.$on('ngRepeatReady', function(){
               $timeout(function(){
                  element.html('<h1>HEAVY CONTENT</h1>').show();
                  $compile(element.contents())(scope);
                  scope.$apply();
               }, 1000);
            });
        } 
    }
});

......和一个有效的code pen。

多步角度ng重复以获得性能增益

2 个答案: