Sluggish performance when filling table with data

Tags: #<Tag:0x00007f344866fb10>

I’m trying to create an app for alarms with two tables. I need to update them with new alarms every two seconds. Tables may contain up to half a million elements, but I do not refill the table every time just add the most recent ones. But when I do that it takes time to show up and meanwhile, the page performance is very slow. Because of that when I leave the app overnight it’s either freezes or makes the app impossible to work with until I refresh it.
Here’s an example that you can try:
To start the timer you should click on any cell inside a table. After that, try to resize a window with a table or scroll and you will see that it takes time to respond and for a table to update.

Can you suggest something, please?

Hi @alext

I’ve made some testing and it looks like the JS heap and lack of GC is visible only when I run the interval in the key down hook for the cell.

I will test this behavior in detail and update you later today.

The issue might be related to the fact that the interval is called more than once. When you click outside the table but in the area of the main DIV you may trigger the callback.

Can you please run the check on the performance in the Chrome Web Tools and send the result? It does not need to run for the whole night. I guess that after 10 minutes we will get some measurable data.

Thank you, Aleksandra for working on this.
So in my code, it’s a bit different, because I send a request to the server to get the most recent alarms. Only if a server responded, I update the table and allow it to send a new request in 2 seconds. So in my case, it doesn’t work on click, it starts the timer when the app starts. I just made this fiddle as an example to check what happens if to update table data very often.

We had a similar issue on a call yesterday. Would it be possible to have a call with you with some screen sharing? If so, please send me a message to