Angular.Js 性能，大型数据集，ng-repeat，html table 带过滤器和双向绑定

Question

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

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

我想就此的最佳设计理念征求意见....即

你会预先将所有数据加载到浏览器吗？如果不是什么时候从服务器请求更多数据。
如果一开始就应该放两个数组，一个显示，一个包含所有数据。
AngularJs 是否对我尝试做的事情有限制，我应该正在使用其他东西吗？
我读过 limitTo 和 trackby 可以用于过滤大数据集，但希望得到其他人的想法。

Answer 1

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

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

Answer 2

我最近运行遇到了一个类似的问题，涉及约 6 万个项目，可过滤、可扩展，每个条目中都有图标，诸如此类。它非常繁重，即使我们的团队实现了一些性能增强（如过滤、trackby、limitTo、分页），它仍然是一团糟，尤其是在我们不幸必须支持的 IE 中（甚至在 IE11 中）。

从上述增强功能来看，分页帮助最大（正如 Nitishkumar Singh 也建议的那样），但仍然不足以实现流畅的用户体验。 Nitishkumar 的回答完美地总结了您要求的每一点我只想向您指出 React (very great documentation imho) and ngReact which will help you achieve what you wish. Our team started to look into React and possible integration to our already extensive AngularJS project(s) and realized it is quite a common thing to do so. Several addons you will find (such as ngReact, angular2react, react2angular，等等）这有助于您进行整合。

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

我的回答不应该是 'I suggest React because it is so cool' 特别是因为我也不是 React 专家，只是想分享这个全新的（实际上正在进行的）经验以及我们如何克服它。

最后我们在模板中得到了这个小片段（检查代码笔是否完整，只需要复制一些代码）：

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

Angular.Js 性能，大型数据集，ng-repeat，html table 带过滤器和双向绑定

Angular.Js Performance, large dataset, ng-repeat, html table with filters and two way binding

javascript

performance

large-data

angularjs

angularjs-ng-repeat