Angular.Js 性能、大型数据集、ng-repeat、带有过滤器和双向绑定的 html 表

Posted 2023-03-11

【中文标题】Angular.Js 性能、大型数据集、ng-repeat、带有过滤器和双向绑定的 html 表

【英文标题】：Angular.Js Performance, large dataset, ng-repeat, html table with filters and two way binding

【发布时间】：2018-04-12 14:55:02

【问题描述】：

所以我有一个简单的页面布局，其中包括一个过滤器面板和一个使用 ng-repeat 的 html 记录表。我正在使用 MVC5 和 angularJs 控制器

我可能需要处理多达 100000 条记录。 大多数列都会出现过滤器，包括日期和文本字段 记录需要处理双向绑定（用户必须选择要返回给服务器的记录）。

我想就此获得最佳设计理念的意见......即

您是否会预先将所有数据加载到浏览器中。如果不是什么时候 从服务器请求更多数据。

如果所有前期都应该保留两个阵列，一个用于显示，一个用于 包含所有数据。

AngularJs 对我想做的事情有限制吗？ 正在使用其他东西吗？

我已阅读 limitTo 和 trackby 可用于过滤大 数据集，但想了解其他人的想法。

【参考方案1】：

我最近遇到了一个类似的问题，大约 6 万个项目，可过滤、可扩展、每个条目中都充满了图标以及类似的东西。它非常繁重，即使我们的团队实现了一些性能增强（如过滤、trackby、limitTo、分页），它仍然非常混乱，尤其是在 IE 中（甚至在 IE11 中），我们很遗憾必须支持它。

从上述增强中，分页帮助最大（正如 Nitishkumar Singh 也建议的那样），但对于流畅的用户体验来说仍然不够。 Nitishkumar 的回答完美地总结了您所要求的每一点，我只想向您指出 React（非常棒的文档恕我直言）和 ngReact，它将帮助您实现您的愿望。我们的团队开始研究 React 并可能集成到我们已经广泛的 AngularJS 项目中，并意识到这样做是很常见的事情。您会发现几个插件（例如ngReact、angular2react、react2angular 等）可以帮助您进行集成。

这是codepen，我致力于测试 React 的一些功能，同时了解它的实际工作原理。我不是 React 方面的专家，但经过几天的挖掘和学习，我可以想出一个解决方案，现在可以加载 3*20k 的项目，其中包含即使在 IE9 上也能顺利运行的几个特性。

我的回答不应该是“我推荐 React，因为它太酷了”，特别是因为我也不是 React 专家，只是想分享这个全新的（实际上正在进行的）经验以及我们如何克服它。

最后，我们在模板中使用了这个小 sn-p（检查 codepen 是否完整，只需要复制一些代码）：

ReactDOM.render(
   <Header parents=parentArray suppliers=supplierArray bsrs=bsrArray/>,
   document.getElementById('app')
);

一些我觉得有用的关于 AngularJS + React 的进一步阅读：

https://blog.logentries.com/2016/02/combining-angularjs-and-reactjs-for-better-applications/

Can angular and react play together?

https://www.quora.com/Why-would-someone-combine-AngularJS-with-ReactJS-when-they-do-the-same-thing

【讨论】：

我曾经遇到过类似的情况，这正是我们当时所做的。将 React 用于大型 Angular 应用程序的一部分。它真的摆脱了性能问题。 +1详细说明。我支持这种方法。

感谢您的帮助，我将对其进行一些研究。我想问一下您是否有角度 2\4 的经验？我问，因为我有它的工作知识，所以升级到 ang2\4 可能比学习反应更容易。我真的很想避免 angular 和 react 之间的宗教辩论，哈哈，只是想知道 angular 2\4 是否可以解决性能问题以及反应

我也不是 A2/4 方面的专家，但我认为它不会像使用 react 那样对您有极大的帮助。 A2/4 在处理大量数据时运行得更快，但这不是我们项目中的主要问题，而是交互期间的浏览器渲染不依赖 .js 文件是否快速运行。 React 大大减轻了浏览器渲染的负担，主要影响的是速度，而不是代码运行得更快。虽然如果您同时修改大量数据，那么 A2/4 将帮助您（反应仍然对渲染部分有用）。

非常感谢您的精彩帖子。真的帮助了我，我相信其他人！

很高兴听到您发现它很有用。如果您碰巧分叉了 codepen 并找到了可能的增强功能或新想法，请在此处分享以供将来参考（以及我的学习:)）

【参考方案2】：

我会说你真的想得很好，会一一回答你的问题

否 无法预先加载所有数据。客户端浏览器将挂起或崩溃。您应该实现pagination 功能，您应该在其中获取数据块。如果可能，不要一次在浏览器内存中保存更多行。因为它无论如何都会减慢您的应用程序 维护两个版本无济于事，只会增加阵列的复杂性和维护。你最终会编写比预期更多的代码 我不会说 Angular 有限制，因为一次加载 100000 行不适用于任何框架，例如 react、vue 等。 是的，在大型数据集的情况下，limitTo 和 trackby 是用于 angular 的最佳选项