Angular.Js Performance，大型数据集，ng-repeat，带过滤器和双向绑定的html表 [英] Angular.Js Performance, large dataset, ng-repeat, html table with filters and two way binding
问题描述
所以我有一个简单的页面布局，其中包括一组过滤器和一个使用ng-repeat的记录html表。我正在使用MVC5和angularJs控制器
So I have a simple layout of a page which includes a panel of filters and a html table of records using ng-repeat. I am using MVC5 and an angularJs controller
我可能需要处理多达100000条记录。
过滤器将出现在大多数列中，包括日期和文本字段
记录需要处理双向绑定（用户必须选择将返回到服务器的记录）。
I may have to deal with up to 100000 records. Filters will occur for most of the columns including dates and text fields The records need to deal with two way binding (user has to select records which will be returned to the server).
我想就此获得最佳设计理念的意见....即
I'd like get opinions on the best design ideas for this....i.e.
-
您是否会预先将所有数据加载到浏览器中。如果不是，那么
将从服务器请求更多数据。
Would you load all the data to the browser upfront. If not when would more data be requested from the server.
如果预先保留两个阵列，一个用于显示，一个
包含所有数据。
If all upfront should two arrays be held, one for display and one with all the data.
AngularJs对我要做的事情有限制吗，我应该用b $ b来使用其他东西吗？
Does AngularJs have limitations with what I am trying to do, should I be using something else?
我已经读过limitTo和trackby对于过滤大型
数据集非常有用，但是想让别人知道。
I've read limitTo and trackby can be useful for filtering large datasets but would like to get others thoughts.
推荐答案
我最近遇到了类似的问题，约有6万件物品，可过滤，可扩展，每个条目中都有图标和类似的东西。它非常沉重，即使我们的团队实现了一些性能增强（如过滤，跟踪，限制，分页），它仍然非常混乱，特别是在IE（即使在IE11中），我们不幸的是必须支持。
I have recently ran into a similar issue with ~60k items, filterable, expandable, full of icons in each entry and stuff like this. It was extremely heavy and even though our team implemented some performance enhancements (like filtering, trackby, limitTo, pagination) it still was quite a mess especially in IE (even in IE11) which we unfortunately have to support.
从前面提到的增强功能中，分页帮助最多（正如Nitishkumar Singh所暗示的那样），但仍然不足以实现顺畅的用户体验。 Nitishkumar的答案完美地总结了您要求的每一点我只想指向 React （非常棒的文档imho）和ngReact将帮助您实现您的愿望。我们的团队开始研究React以及可能与我们已经广泛的AngularJS项目的集成，并意识到这是非常常见的事情。你会发现几个插件（例如 ngReact ， angular2react ， react2angular 等等，它可以帮助您进行集成。
From the aforementioned enhancements pagination helped the most (as Nitishkumar Singh also suggests) but still wasn't enough for a smooth UX. Nitishkumar's answer sums up perfectly each point you asked for I would just like to point you towards 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, etc.) which helps you with integration.
这是一个 codepen 我一直在研究React的一些功能，同时学习它的实际工作原理。我不是React的专家，但经过几天的挖掘和学习后，我可以提出一个解决方案，现在可以加载3 * 20k项目，其中有几个功能即使在IE9上也可以顺利运行。
This is a codepen I worked on to test some features of React while learning how it actually works. I am no expert on React but after a few days of digging and learning I could come up with a solution that now loads 3*20k items with several features that runs smoothly even on IE9.
我的回答不应该是'我建议React因为它太酷了'，特别是因为我不是React的专家，只是想分享这个相当新的（实际上正在进行的）经验以及我们如何克服它。
My answer is not supposed to be a 'I suggest React because it is so cool' especially since I am no expert on React either, just wanted to share this quite new (actually ongoing) experience and how we overcame it.
最后，我们在模板中找到了这个小片段（检查codepen是否完整，只需要复制一些代码）：
At the very end we ended up with this tiny snippet in our template (check the codepen for full, just had to copy some code):
ReactDOM.render(
<Header parents={parentArray} suppliers={supplierArray} bsrs={bsrArray}/>,
document.getElementById('app')
);
我发现有用的AngularJS + React的进一步阅读：
Some further reading on AngularJS + React which I found useful:
https：/ /blog.logentries.com/2016/02/combining-angularjs-and-reactjs-for-better-applications/
https： //www.quora.com/Why-would-someone-combine-AngularJS-with-ReactJS-when-they-do-the-same-thing
这篇关于Angular.Js Performance，大型数据集，ng-repeat，带过滤器和双向绑定的html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
