Question

我正在渲染一个大表，有多个组，嵌套的ng-repeats等等，有数千个模型。显然，渲染表的性能非常慢，大约4-5秒。

我可以通过使用bind once功能（:: model）来加速它，但后来我永远无法更新表。我真正需要的是一种更新整个表格标记的方法，而不是更新单个单元格（所以我真的不需要表格中每个单元格的单独监视）。

我最终使用JavaScript，$ interpolate和$ sce渲染表格，现在只需不到50毫秒，并且唯一被观看的模型是表格的html标记。当条件更改时，将重新生成整个标记并更新视图。然而，这似乎打败了Angular的目的，不得不在JS中手动编写视图而不是使用模板。

我真正需要的是一种使用bind once（:: model）的方法，通过观察模型，例如每次条件改变时都会递增的计数器。

这样的事情：

<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

老实说，我认为在没有充分利用Angular所具有的所有优势的情况下渲染表的选择并不错。根据具体情况，它的优点是我们的灭绝。

最近，在我工作的一个项目中，我们遇到了表格中表现的一个非常重要的问题，它的起源就是我所说的“过度使用Angular”。我的情况与你的情况相同。大量的观察者和范围，因为大量的ng-repeat（每行，每个细胞，细胞内部呈现多个数据，......）和其他Angular东西（ng-class，ng-if，......）。我们花了几个小时在头脑风暴会议上试图寻找最佳选择。当然我们虽然在一个数据绑定等等，但问题并没有消失。最后，我们虽然“如果问题来自Angular，也许我们过度使用Angular”......我们重构了代码，现在，性能不是问题。我们的表是使用Angular和DOM脚本的组合生成的。最深的ng-repeat是生成行，并且通过DOM脚本使用纯javascript生成行的每个内容。我们已经找到了Angular的优点和DOM脚本的优点之间的平衡，并且它起作用。我们的表格是可排序的，过滤器，......

我知道的其他情况是我的一位同事所拥有的。情况非常相似，他决定减少过度使用Angular并将其与ReactJS结合使用。

所以我的结论是“不要停止使用Angular，但不要关闭它以将其与其他替代品结合起来”。有这些成分不足以烹饪......我们也需要知道食谱。

祝你的项目好运。

Answer 2

我们遇到了类似的问题，即使用虚拟重复技术。

如果您使用的是AngularJS，那么Angular Material library会提供此功能，如果您使用的是Angular，则another library会提供此功能。

请注意，虚拟重复不能与表一起使用，只能使用DIV列表。但值得一提的是，浏览器可以比表格更快地呈现DIV列表。

我们创建了一些简单的CSS，使DIV显示并像表一样运行。结果是能够非常快速地渲染1000行。

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

<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>

Angular 1.x重新渲染

2 个答案: