我想知道角度框架可以处理的最大数据量是多少。说,我使用角度和一些图表框架(如chartjs)显示图表。我想知道浏览器最多可以正常显示多少数据,显示缓慢还是崩溃。
答案 0 :(得分:0)
您的问题没有简单的答案,但我会尝试将其弄平并给出一个简单的答案,或者至少要考虑简单的事情...
Angular(在运行时)就像许多其他框架一样,只是JavaScript, 因此,让我们将问题简化为“关于加载数据的 JavaScript 和浏览器的限制”,
JavaScript没有可以处理的内存或存储空间上限, 我见过JavaScript应用程序需要超过15GB的RAM, 他们的表现也不错。 因此,假设数据大小本身不是问题(当然,除非您的应用程序实现不佳,内存泄漏或效率不高)。
我看到的主要挑战是显示和操作信息 不会造成不必要的延迟或反应迟钝。
显示信息--假设您有一个列表(或表格),其中包含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