How can I improve the performance of my custom DOM filtering system for large datasets?

I’m developing a custom filtering system called AFS (Advanced Filter System) that allows users to filter, sort, and search DOM elements dynamically. It supports features like text search with debounce, multi-criteria sorting, and URL state management (demo here).

The Problem:
When I use this system on a page with a large number of items, the performance drops significantly, especially when applying multiple filters or sorting. I’m using basic DOM manipulation to hide and show items, but I believe there might be a more efficient way to handle large datasets.

What I’ve Tried:

- Implemented debounce to reduce the number of filter calls.
- Tried to minimize DOM reflow by only modifying necessary elements.
- Considered using requestAnimationFrame for smoother animations but haven’t fully implemented it.

My Question:
What are the best practices for optimizing the performance of such filtering systems, particularly when dealing with large DOM elements? Should I consider a virtualized list or use a different approach entirely?

You can find more details about the package here: Advanced Filter System on NPM.

This is my first time creating a package, so I’m looking forward to your feedback to help me get better!

• Implemented debounce to reduce the number of filter calls.
• Tried to minimize DOM reflow by only modifying necessary elements.
• Considered using requestAnimationFrame for smoother animations but haven’t fully implemented it.

You need to sign in to view this answers