-2

I would like to know what is the maximum data that angular framework can handle. Say, I am displaying a chart using angular and some charting framework like chartjs. I'd like to know up to how many data can the browser display properly, with slowness, or up to when it crashes.

iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78
  • 6
    The limit is not related to angular, and it depends on the browser and the computer, did you see this answer : https://stackoverflow.com/a/34667584/8945135 Displaying a chart does not mean doing all the hardcore computing in the front side, you could compute everything somewhere else and only display the results. – ibenjelloun Aug 07 '18 at 06:54
  • Question is: How much data you want to display and how many charts? Be more specific. Is it 2 GB RAM or 20 GB RAM? This question is vague and open to interpretation. – r2018 Aug 10 '18 at 15:59
  • About memory limits: https://stackoverflow.com/questions/2936782/javascript-memory-limit , Otherwise, it is about your implementation and libraries that you use. There is processing time limit when browsers may think that your application has hang. But, if you hit that limit, you probably is doing something wrong. – Vladimir M Aug 11 '18 at 16:14
  • It depends on the way you implement the charts and data flow. There are lot of ways by which browser can handle lot of data with angular like onPush, Lazy Loading/Virtual loading etc. – Krishna Aug 13 '18 at 07:01
  • If you are worried about limitations of devices then don't make the chart in Angular, make it on the server and display it using Angular. – jmbmage Aug 13 '18 at 12:41

1 Answers1

0

Your question has no simple answer, but I will try to flatten it and give a simple answer, or at least simple things to consider...

Angular (at runtime), like many other frameworks is simply JavaScript, So let us reduce the question to "Limitation of JavaScript and browsers with regards to data loaded",

JavaScript has no upper limit of memory or storage it can handle, I've seen JavaScript applications that require more than 15GB of RAM, and they performed well too. So assume data size itself is not an issue (unless your application is poorly implemented, leaking memory or just not very efficient, of course).

The main challenge as I see it, is displaying and manipulating the information without causing unnecessary delay or unresponsiveness.

Displaying the information - let's say you have a list (or a table) containing 1,000,000 possible gifts which you then want to display for the user to select. Adding the list items to the document one by one is tempting, but will require the browser to repaint after each addition (causing a delay or full unresponsiveness until finished), another way is adding the elements to some DOM element (denoted by N) still being kept in memory, then adding all elements corresponding the list items to the element N (still, just an in memory operation), finally adding N to the document containing the entire list - the will be a much better solution for displaying the large amount of data.

Manipulating the information - displaying is indeed not enough. you would like to move, drag, sort and filter the data being displayed. And as mentioned before, it is a bad idea removing many elements directly from DOM. You should instead remove container from the document's DOM to memory, manipulate the data in it, and then add the container right back to the document. Angular does this kind of magic for you. (Toggling the 'display:none\block' css attribute of many elements has a similar blocking effect as I recall).

A good practice is implementing an application/page showing only the amount of data that can be processed by a human at a single glance. The rest of it should be considered in the application data-layer, in memory, and should be loaded to display given the appropriate need or request.

To conclude, you can deal with huge amounts of data as long as you provide a mechanism that efficiently filter the displayed information.

I hope it helps...

for further reading: 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

Daniel
  • 257
  • 1
  • 7