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

标签 javascript angularjs performance angularjs-ng-repeat large-data

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

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

我想获得有关最佳设计理念的意见......即

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

  • 如果所有前期都应该保存两个数组,一个用于显示,一个用于显示 包含所有数据。

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

  • 我读过 limitTo 和 trackby 对于过滤大数据很有用 数据集,但想了解其他人的想法。

最佳答案

我最近遇到了类似的问题,大约有 60k 个项目,可过滤,可扩展,每个条目中都充满了图标和类似的东西。它非常重,尽管我们的团队实现了一些性能增强(如过滤、trackby、limitTo、分页),但它仍然相当困惑,尤其是在 IE 中(甚至在 IE11 中),不幸的是我们必须支持它。

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

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

我的回答不应该是“我建议使用 React,因为它太酷了”,特别是因为我也不是 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

关于javascript - Angular.Js 性能、大型数据集、ng-repeat、带过滤器的 html 表和双向绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47035391/

相关文章:

javascript - 为什么 Node.js + express 应用程序不会因错误而崩溃?

javascript - 什么是搜索一系列食谱并匹配某些配料表上多个单词的有效方法

javascript - Angular 错误 : [$compile:tpload] Failed to load template

javascript - 检查任何 Angular 输入是否有输入

performance - 序言程序: clp(fd) too slow无输出

c# - 为什么在 .NET 5 中用作泛型类型参数时引用类型为 "slower"?

javascript - 如何在scrollTop上应用百分比

javascript - 简单的寻路

javascript - 创建管理面板 Mean.js

javascript - 在 dom 中搜索元素最快的方法是什么?