search

brianvoe / slim-select

Slim advanced select dropdown
http://slimselectjs.com
MIT License
1.07k stars 200 forks source link

Use `createDocumentFragment` to append options to DOM #586

Open Gotenks-J opened 1 week ago

Gotenks-J commented 1 week ago

I've bumped into a performance issue using slim-select when lots of options are repeatedly added/removed from the DOM as part of renderOptions.

We use the search event to query an endpoint that returns >7,000 records. This causes each option to be individually added/removed from the DOM, this can cause slowness for our application if a user searches multiple times.

With this change, instead of adding each option to the DOM one-by-one and performing lots of modifications. We create a document fragment and append to that, once all options have been processed we append the document fragment to the DOM.

I'm working on benchmarking this to support the change but, anecdotally, I am seeing an improvement in responsiveness using this change locally.

Let me know if you have any concerns with this change 👍

brianvoe commented 1 week ago

Ohh interesting. I would say if your loading 7,000 of anything you have a search issue on your hands.

That being said im all for MORE SPEED! So if you have the proof, showcase it here and if everything works ill get that pr merged in super quick!