角1.x重渲染

Question

我呈现了一个大的表，有多个组，嵌套的ng重复等等，有数千个模型。显然，呈现表的性能非常慢，大约在4-5秒之间.

我可以通过使用bind一次性功能(::model)来加快速度，但是那样我就永远无法更新表了。我真正需要的是更新整个表的标记，而不是更新单个单元格(所以我真的不需要表中每个单元格的单独监视)。

最后，我使用JavaScript、$interpolate和$sce来呈现表，它们现在所用的时间不到50 is，所监视的唯一模型是表的html标记。当条件发生变化时，将重新生成整个标记并更新视图。然而，这似乎不符合“角度”的目的，必须在JS中手动编写视图，而不是使用模板。

我真正需要的是一种使用bind一次(:: model )的方法，不对单个表数据进行监视，还需要一种通过观察模型(例如，每次条件更改时将递增的计数器)来重新呈现整个DOM结构的方法。

就像这样：

<div id="detailTable" ng-rerender="someModel">         
     <div ng-repeat... using bind once
     <div ng-repeat... using bind once
     <div ng-repeat... using bind once
     <div ng-repeat... using bind once
           <div ng-repeat... using bind once
     ...
</div>

然而，我找不到这样的东西，虽然它似乎应该存在，但我是否错过了什么？

Answer 1

老实说，我认为在不充分利用角的所有优点的情况下渲染表格的选择是不错的。视情况而定，它的优势是我们的灭亡。

最近，在我正在工作的一个项目中，我们在表中的性能方面遇到了一个非常重要的问题，它的起源就是我所称的“角的过度使用”。我的案子和你的一样。大量的观察者和范围，因为很多ng-重复(每行，每个单元格，在单元格内呈现多个数据，.)其他角度的东西(纳克级，纳克-如果，.)。我们花了几个小时在头脑风暴会议上，试图找到最好的选择。当然，我们认为在一个数据绑定等等，但问题并没有消失。最后，我们认为“如果问题来自角度，也许我们过度使用角度”.我们重构了代码，现在，性能已经不是问题了。我们的表是通过角脚本和DOM脚本组合生成的。最深的ng重复是生成行，行的每个内容都是通过DOM脚本使用纯javascript生成的。我们找到了角的优势和DOM脚本的优势之间的平衡，它是可行的。我们的桌子是可分类的，可过滤的，.

我知道的另一个案例就是我的一位同事。情况非常相似，他决定减少角的过度使用，并将其与ReactJS结合使用。

因此，我的结论是“不要停止使用角度，但不要关闭与其他选择相结合的大门”。有食材是不够的.我们还需要知道配方。

祝你的项目好运。

Answer 2

我们有一个类似的问题，我们处理，即使用虚拟重复技术。

如果您使用的是AngularJS，那么角材料库就提供了这个框，如果您使用的是角，那么另一个图书馆就提供了这个功能。

请注意，不适用于表，只适用于DIVs列表。但另一个好处是，浏览器可以比表更快地呈现一个DIVs列表。

我们创建了一些简单的CSS，使DIVs看起来像一个表。其结果是能够以极快的速度呈现1000 s行。

如果有帮助，下面是我在“表”组件中用于呈现列表本身的代码。

<md-virtual-repeat-container flex class="table-body" scroll-shadow>
    <md-list-item class="table-row" layout="row" md-virtual-repeat="row in $ctrl.displayRows">
        <div class="table-cell {{$ctrl.headers[$index].className}}" ng-repeat="cell in row.cells">
            <div ng-if="cell.templateUrl" ng-include="cell.templateUrl"></div>
            <div ng-if="!cell.templateUrl" ng-bind-html="cell.contents"></div>
        </div>
    </md-list-item>
</md-virtual-repeat-container>