Problem with 2000+ records view in my reports (Slow and Crash)?


#1

I generate report with 2000+ records, but it is slow and sometime crash.
How to solve?


#2

Look friend, you have asked this question or a variation of it multiply times on the forum. People are happy to help but you really need to try and be friendlier. I realise that English might not be your first language, but using things like “Please would you help” or “I am having trouble understanding” will go a long way. “How to solve?” will turn a lot of people off.

Now to answer your question. There is no use case for having 2000 records visible to a user at one point in time. You need to lazy load them as the user scrolls or have a “View More”. The reason your app is slow and crashing is that 2000 records is too much for a single page and is clobbering the memory of the page.


#3

Well, that burn stings :smile:

To give some options just in case you actually really need 2000 records “visible” on the page, here’s a suggestion:

Browsers just can’t display that many DOM elements on the page at once, even just 1000 records would already be far too much for the browser to render on your page. Entropy was probably referring to your browser is slow and crashes because you load 2000 records with their DOM elements at once. If you load them one by one lazy loading style like he suggested your browser might last longer since you don’t try to render/paint 2000+ elements at once, however performance is still going to suck and eventually things will slow down and crash.

What you want to do if you have a list of thousands of records is:

  1. lazy load additional records with a “load more” button or as you scroll down to the list of records (infinite scrolling). You would for example only show 30 records and whenever you reach the bottom of the list you load 30 more records.

  2. Use one of the many available components in frameworks like angular/react/polymer/ionic/etc that fake that you’re viewing all the records at once. Those components basically only actually show/render as many DOM elements as are currently visible in the viewport. Once you scroll up and down the components switches out the data/DOM elements on the fly, making it look as if you have an infinite list of elements on your page, when in reality at any given time the browser is only rendering about 30 of your elements or so at once instead of 2000+.

Please note those are two things I would do at the same time, they’re not two seperate options. I’m not sure which of the mentioned frameworks above offer such a component. I know that Polymer and Ionic offer them. (iron-list in the case of Polymer, still being ported to 1.0 right now. Almost finished though.)


#4

Thanks for all reply and sorry my English not good.
I will try and find the package for lazy loading.