Angular 和浏览器在加载数据方面的限制答案

【问题标题】：Limitation of Angular and browsers with regards to data loadedAngular 和浏览器在加载数据方面的限制
【发布时间】：2019-01-08 13:01:09
【问题描述】：

我想知道 Angular 框架可以处理的最大数据是多少。说，我正在使用 angular 和一些图表框架（如 chartjs）显示图表。我想知道浏览器最多可以正确显示多少数据，速度很慢，或者何时崩溃。

【问题讨论】：

限制与angular无关，取决于浏览器和电脑，你有没有看到这个答案：stackoverflow.com/a/34667584/8945135显示图表并不意味着在前端做所有的硬核计算，您可以在其他地方计算所有内容并仅显示结果。
问题是：你要显示多少数据和多少图表？更加详细一些。它是 2 GB RAM 还是 20 GB RAM？这个问题含糊不清，可以解释。
关于内存限制：stackoverflow.com/questions/2936782/javascript-memory-limit，否则，它与您的实现和您使用的库有关。当浏览器可能认为您的应用程序已挂起时，存在处理时间限制。但是，如果你达到了这个限制，你可能做错了什么。
这取决于您实现图表和数据流的方式。浏览器可以通过多种方式处理大量数据，如 onPush、延迟加载/虚拟加载等。
如果您担心设备的限制，请不要在 Angular 中制作图表，而是在服务器上制作并使用 Angular 显示。

标签： javascript angular browser

【解决方案1】：

您的问题没有简单的答案，但我会尝试将其展平并给出一个简单的答案，或者至少要考虑一些简单的事情......

Angular（在运行时）和许多其他框架一样只是 JavaScript，因此，让我们将问题简化为“JavaScript 和浏览器在加载数据方面的限制”，

JavaScript 没有它可以处理的内存或存储上限，我见过需要超过 15GB RAM 的 JavaScript 应用程序，他们表现也很好。因此，假设数据大小本身不是问题（当然，除非您的应用程序执行不当、内存泄漏或效率不高）。

在我看来，主要的挑战是显示和操纵信息不会造成不必要的延迟或反应迟钝。

显示信息 - 假设您有一个列表（或表格），其中包含 1,000,000 个可能的礼物，然后您希望显示这些礼物供用户选择。将列表项逐个添加到文档中很诱人，但是每次添加后都需要浏览器重新绘制（导致延迟或完全无响应直到完成），另一种方法是将元素添加到某些 DOM 元素（用 N 表示）仍然被保存在内存中，然后将列表项对应的所有元素添加到元素 N （仍然，只是内存中的操作），最后将 N 添加到包含整个列表的文档中 - 这将是显示大量的更好的解决方案数据的。

操纵信息-显示确实是不够的。您想移动、拖动、排序和过滤正在显示的数据。如前所述，直接从 DOM 中删除许多元素是个坏主意。相反，您应该将容器从文档的 DOM 中删除到内存中，操作其中的数据，然后将容器重新添加回文档中。 Angular 为你做了这样的魔法。（我记得切换许多元素的 'display:none\block' css 属性具有类似的阻塞效果）。

一个好的做法是实现一个应用程序/页面，只显示人类可以处理的数据量，一目了然。其余部分应在应用程序数据层、内存中考虑，并应根据适当的需要或请求加载以显示。

总之，只要提供一种有效过滤显示信息的机制，就可以处理海量数据。

希望对你有帮助……

进一步阅读： Slow and fast ways of adding elements to DOM

A question emphasizes the lack of memory limit used by JS

CSS display attribute performance

A good discussion about the reasons for slow DOM

About using HTML5 correctly - old but still true

Once the DOM creation procedure is understood - it much easier to display data without affecting performance / user experience

【讨论】：