Angular.Js 性能、大型数据集、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 对我尝试做的事情有限制吗?正在使用其他东西?
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.
推荐答案
我最近遇到了一个类似的问题，大约有 60k 个项目，可过滤、可扩展、每个条目都充满图标等等.它非常繁重，即使我们的团队实现了一些性能增强(如过滤、trackby、limitTo、分页)，但它仍然非常混乱，尤其是在 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 所建议的那样)，但仍不足以实现流畅的 UX.Nitishkumar 的回答完美地总结了您要求的每一点，我只想向您指出 React(恕我直言，非常棒的文档)和 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.
最后，我们在模板中得到了这个小片段(检查代码笔是否完整，只需要复制一些代码):
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 性能、大型数据集、ng-repeat、带有过滤器和双向绑定的 html 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
