Sometimes the DOM IS better.

I've been working with jQuery a lot lately, and, for the most part, it has never given me any issues.

I have noticed lately, though, that when it comes to using any append/remove/find function in the jQuery library, if it is on items that have a lot of data, jQuery has serious performance issues.

The example I ran into today was, I have a drop down that has a lot of users in it.  It's somewhere around 4,000 options.

I normally find the selected option's text using


This takes about 2 seconds or so for jQuery to do.  I believe it's because jQuery's find method isn't optimized for large traversal like that.

I wound up making a quick jQuery extension lgtext(), which is simply:



This worked A LOT faster than jQuery.  In fact, it was pretty much an instant return.

The jQuery appendTo method only has a few milliseconds in lag time, so I left it in.  It's enough to notice a slight pause, but not enough for it to really affect production.

jQuery's .remove() is also very slow on this select field, taking about 2 seconds to complete as well.

To combat this, I created my own extension, lgremove():



This works perfectly, and is also an instant completion.

These are the only issues I've ever had with jQuery, so that should say something about the library.

It is pretty solid.

Just to clarify, the 2 seconds of lag time was in Chrome.  I was too scared to see how many times longer it would be in IE...

For you jQuery veterans out there, is there a better way for me to approach this using the built in jQuery methods?