Question

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

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

我希望得到关于最佳设计理念的意见....即

您是否会预先将所有数据加载到浏览器中。如果不是的话从服务器请求更多数据。
如果所有前期都要保留两个数组，一个用于显示，一个用于显示包含所有数据。
AngularJs对我正在尝试做的事情有限制吗？使用其他东西？
我读过limitTo和trackby对于过滤大号有用数据集，但希望得到别人的想法。

Answer 1

我最近遇到了类似的问题，约有6万件物品，可过滤，可扩展，每个条目中都有图标，以及类似的东西。尽管我们的团队实现了一些性能增强（如过滤，跟踪，限制，分页），但它仍然非常糟糕，特别是在IE（即使在IE11中），我们很遗憾不得不支持它。

从上述增强功能来看，分页帮助最多（正如Nitishkumar Singh所暗示的那样），但仍然不足以实现顺畅的用户体验。 Nitishkumar的答案总结了你要求的每一点我只想指向React（非常好的文档imho）和ngReact，它将帮助你实现你想要的。我们的团队开始研究React以及可能与我们已经广泛的AngularJS项目的集成，并意识到这是非常常见的事情。您会找到几个插件（例如ngReact，angular2react，react2angular等）来帮助您进行集成。

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

我的答案不应该是'我建议React因为它太酷了'，特别是因为我不是React的专家，只是想分享这个相当新的（实际上正在进行的）经验以及我们如何克服它。 / 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

Answer 2

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

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

Angular.Js Performance，大型数据集，ng-repeat，带过滤器和双向绑定的html表

2 个答案: