Modify Large List of elements through filtering systems effciently


This Content is from Stack Overflow. Question asked by ErIK

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!


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?