I am displaying a list of 5000 cards in the dom. These cards display different types of data such as text, images, buttons, etc. The list should update in real-time as you type in the search bar or use some other type of filtering mechanism. The issue is that with such an extensive list you get a performance hit that is unbearable when modifying the dom, item by item. For example, hiding cards that need to be filtered. ‘Visibility: none’, in this case, won’t work. It just throws off the look. It would have to be ‘display: none’ which is pretty much the problem as it triggers reflow. Removing the card has the same issue and it causes a new problem as you need to restore the list when you remove the filter.

The solution I found was to have a clone of the list stored outside the dom. With every modification, I would create a clone of that cloned list, modify it as needed and then swap it in a single step by removing the container of the displayed items and appending the cloned modified one. This works. It handles 5000 node elements well and fast. if I backtrack with the filter, I just append an unmodified clone list. I have no issues with the performance, but I am just wondering if there is a better way to do this.

If I were to just remove the list and do my modifications and append it back. You would see it flash. I opted out of it for that reason.

Please do note I cannot use any libraries or frameworks to do this, just pure vanilla javascript using es5 or older functions. That is just the requirement and there isn’t anything that I can do about it.

The other thing is, you cannot do pagination or infinite scrolling either. The list has to be displayed in full.

Those are the requirements. Is there a better solution? Thank you!