Angularjs 角度1.x重新渲染

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

我本可以通过使用bind-once功能（：：model）来加快速度，但这样我就永远无法更新表了。我真正需要的是一种更新整个表的标记的方法，而不是更新单个单元格（因此我真的不需要表中每个单元格的单独监视）

最后，我使用JavaScript、$interpolate和$sce呈现了这个表，现在只需要不到50毫秒的时间，唯一被关注的模型就是这个表的html标记。当条件更改时，将重新生成整个标记并更新视图。然而，这似乎违背了Angular的目的，必须在JS中手动编写视图代码，而不是使用模板

我真正需要的是一种使用bind once（：：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>

老实说，我认为在不充分利用Angular的所有优点的情况下渲染表的选项是不错的。取决于环境，它的优势是我们的灭亡

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

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

因此，我的结论是“不要停止使用Angular，但不要关上门将其与其他替代方案结合起来”。有这些配料还不足以烹饪。。。我们还需要知道配方

祝您的项目好运。
我们有一个类似的问题，我们使用虚拟重复技术处理了这个问题

如果您使用的是AngularJS，则提供现成的功能；如果您使用的是AngularJS，则提供此功能

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

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

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

<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代码中的DOM操作仍然是一种糟糕的做法，通常是一个糟糕的想法。除了：在*指令*内。这正好适合这种情况，顺便说一句。这种重新绘制速率挑战可能对您有用。Angular 1.x有5种不同优化技术的实现，这里的代码仅供参考。呈现大型表格对浏览器有渲染影响，呈现div列表这样的东西效率更高。