angularjs - Angular 1.x 重新渲染

Question

我正在渲染一个大表格，其中包含多个组、嵌套的 ng-repeats 等，以及数千个模型。显然渲染表格的性能非常慢，大约需要 4-5 秒。

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

我最终使用 JavaScript、$interpolate 和 $sce 渲染了表格，现在耗时不到 50 毫秒，唯一被观察的模型是表格的 html 标记。当条件发生变化时，将重新生成整个标记并更新 View 。然而，这似乎违背了 Angular 的目的，必须在 JS 中手动编写 View 而不是使用模板。

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

但是我找不到这样的东西，即使它看起来很明显应该存在，我是不是漏掉了什么？

Answer 1

老实说，我认为在不充分利用 Angular 的所有优势的情况下呈现表格的选项还不错。根据上下文，它的优势就是我们的灭亡。

最近，在我工作的一个项目中，我们遇到了一个非常重要的表格性能问题，其根源是我称之为“过度使用 Angular”。我的情况和你的一样。很多观察者和范围，因为很多 ng-repeat(每行，每个单元格，单元格内部以呈现多数据，...)和其他 Angular 东西(ng-class，ng-if，...)。我们花了几个小时在头脑 Storm session 上试图找到最好的选择。当然我们虽然在一个数据绑定(bind)等，但问题并没有消失。最后，我们认为“如果问题来自 Angular，也许我们过度使用了 Angular”……我们重构了我们的代码，现在，性能不是问题。我们的表格是结合使用 Angular 和 DOM 脚本生成的。最深的ng-repeat是生成行，行的每个内容都是通过DOM脚本用纯javascript生成的。我们已经找到了 Angular 的优势和 DOM 脚本的优势之间的平衡点，并且它起作用了。我们的表是可排序的、可过滤的、...

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

所以我的结论是“不要停止使用 Angular，但不要关闭将它与其他替代方案结合使用的大门”。有了食材还不足以做饭……我们还需要知道食谱。

祝你的项目好运。