Javascript 多步角度ng重复可提高性能

我已经阅读了很多关于如何提高

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>

{{item.title}

我想完成的是一个快速的初始重复，只显示

child.name

，然后是一个单独的非阻塞操作（指令、web worker、延迟魔法等等），用于处理重元素的渲染。通过这种方式，GUI保持快速，并且可以立即单击

元素；同时，在后台，DOM中会加载其他内容

---

这可能吗？

您可以使用一个指令来实现这一点。该指令可以执行异步工作（如果可以的话，甚至可以使用worker）来解除其内容的显示

---

但是如果您必须在DOM中一次插入100000个html标记，那么您将始终处于冻结状态。这不是角度的问题。浏览器根本无法处理这一点。

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

另一种方法是在初始的

ng repeat

完成渲染后，

ng repeat

通过在

ng repeat

的

ng init

上触发一个事件，并让

指令监听事件，准备将其内容编译到DOM中，从而

$compile

将重内容编译到DOM中

这是标记

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

。。。带有

$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);
            });
        } 
    }
});

app.directive（'heavyContent'，函数（$timeout）{
返回{
模板：“正在加载…
”，
链接：函数（范围、元素、属性）{
作用域：$on（'ngRepeatReady'，函数（）{
$timeout（函数（）{
html（'HEAVY CONTENT'）.show（）；
$compile（element.contents（））（范围）；
作用域：$apply（）；
}, 1000);
});
} 
}
});

---

。。。还有一个正在工作。

我已经尝试过了，但是直到指令完成is job并且GUI被冻结，DOM才被填充，因为线程仍然是一样的。我还尝试在指令中使用

$timeout

更改摘要周期，这很有帮助，但在重复完全结束之前，链接仍然无法单击。在DOM中插入“大量元素”时，无法避免“冻结”。例如，如果同时插入1000000

，浏览器将冻结。也许你需要以不同的方式思考你的用户界面？是的，我同意这一点。如果可以的话，我建议使用分页。您的“重”元素中到底有什么？它只是一个小的favicon图像（也已缓存在本地存储中），但仍然有大约500个“子元素”，渲染和解冻GUI需要4秒钟。您可以发布重元素模板和部分数据。或者JSFIDLE？再添加一点，在表达式中尽可能使用一次性绑定。例如，在这里，您可以将其用于“a”标记。因此，没有办法减少在多个过程中分割每个重复的渲染量？唯一的方法是无限滚动？是的，您可以在初始渲染后将元素编译到Dom中。你的扳机是什么$是否加载了视图内容？这可能行得通，我到我的机器前会拉小提琴…@hally9k谢谢你建议的方法，我对钢笔做了一点修改以显示我的问题。延迟渲染工作正常，但仍会冻结GUI。在我的示例中，只有200个项目，链接是不可点击的，在整个渲染完成之前，滚动不起作用

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);
            });
        } 
    }
});