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
Leave feedback about this