jQuery UI .buttonset() is too slow

Question

I have a few thousand buttons on an HTML page. It takes more than 10 seconds to run $(".buttonset").buttonset(); on document ready. Is there a faster way to do this, or is my only solution to somehow limit the number of buttons?

Answer 1

Create the buttonsets on demand before they are shown by the first time.

I just tested with 2400 boxes split in 12 sections. It runs smoothly on my i7 using Chrome 23, Firefox 17, IE9, Opera 12.

This may add a split loading moment for the first time you open a a checkbox group, but it does save some RAM by not creating unused styled buttons until they're necessary.

Fiddle

Answer 2

There isn't much you can do about the speed that buttonset() takes to setup the thousands of buttons, but if your problem with the 10 seconds is a browser message saying that the page has become unresponsive you can break up the operation into asynchronous operations with a setTimeout call.

$(".buttonset").buttonset();

Would become:

$(".buttonset").each(function(index, button) {
   setTimeout(function() {
       $(button).buttonset();
   }, 0);
});

I've used this pattern successfully with thousands of jQuery UI objects, and while it doesn't speed up the operation it will keep the page from locking up, thus giving the appearance that it is working faster.