jQuery Forum

I found an opportunity to make an optimization in one area of jQuery UI, which might be applicable to other areas as well. The basic idea is to minimize the number of calls to addClass(), since an arbitrary number of classes can be added with a single call.

Currently in _resetButton() method of the button code (https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.button.js), there is the potential to call addClass() on buttonElement multiple times. To optimize this, the addClass() call should be defered, and the class names to add buffered in a string, until they can all be added together.

1. if ( icons.primary || icons.secondary ) {
2.     buttonElement.addClass( "ui-button-text-icon" +
3.         ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
4.     if ( icons.primary ) {
5.         buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
6.     }
7.     if ( icons.secondary ) {
8.         buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
9.     }
10.     if ( !this.options.text ) {
11.         buttonElement
12.             .addClass( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" )
13.             .removeClass( "ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary" );
14.         if ( !this.hasTitle ) {
15.             buttonElement.attr( "title", buttonText );
16.         }
17.     }
18. } ...

And the following test code demonstrates the difference that calling addClass() fewer times can make, in IE 8:

1. function getRunTime(fn) {
       var startTime = new Date();
       fn();
       var endTime = new Date();
       return endTime - startTime;
   }
2. function runAddClassOptimizationTest() {
3.     var nIterations = 1000;
4.     var content = $('#content');
5.     var separateResult = getRunTime(function() {
6.         for (var i = 0; i < nIterations; ++i) {
7.             content[0].className = "";
8.             content.addClass('foo');
9.             content.addClass('bar');
10.         }
11.     });
12.     var combinedResult = getRunTime(function() {
13.         for (var i = 0; i < nIterations; ++i) {
14.             content[0].className = "";
15.             content.addClass('foo bar');
16.         }
17.     });
18.     alert('Separate Result: ' + separateResult
19.         + '\nCombined Result: ' + combinedResult);
20. }

My results for IE 8:

Separate Result: 453
Combined Result: 250

Note that this technique might be applicable to many areas of the jQuery UI code!


Haw-Bin