Opportunities for improved performance

[SteveTheTechie]

Reference #717 comment 1.

Creating entire jQuery objects for what are essentially creation and manipulation of single DOM elements...

Example 1: (Ran inside a loop... lots of potential.)

      var $item = $("<li/>").addClass(liClasses.join(' '));
      var $label = $("<label/>").attr({
        "for": inputID,
        "title": title
      }).addClass(labelClasses.join(' ')).appendTo($item);
      var $input = $("<input/>").attr({
        "name": "multiselect_" + id,
        "type": isMultiple ? "checkbox" : "radio",
        "value": value,
        "title": title,
        "id": inputID,
        "checked": isSelected ? "checked" : null,
        "aria-selected": isSelected ? "true" : null,
        "disabled": isDisabled ? "disabled" : null,
        "aria-disabled": isDisabled ? "true" : null
      }).data($(option).data()).appendTo($label);

      var $span = $("<span/>").text($(option).text());

Example 2: ("this" will reference a single DOM element here... no need for jQuery)

      this.header.on('click.multiselect', 'a', function(e) {
        var $this = $(this);
        if($this.hasClass('ui-multiselect-close')) {
          self.close();
        } else if($this.hasClass("ui-multiselect-all")) {
          self.checkAll();
        } else if($this.hasClass("ui-multiselect-none")) {
          self.uncheckAll();
        } else if($this.hasClass("ui-multiselect-flip")) {
          self.flipAll();
        }

[SteveTheTechie]

Another possibility.... Doing refreshes asynchronously if the menu is closed and there is a certain threshold number of options.

[SteveTheTechie]

We need some tests with large numbers of options so that we can really see what makes a difference.

[SteveTheTechie]

I am digging into this a bit. I have done some research and I found the following to be very informative.

https://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery

https://jsperf.com/jquery-element-creationyay/19

[mlh758]

Yeah, looking at the results in one of the replies $( document.createElement('div') ); seems to be an order of magnitude faster. It also still gives us a jQuery object to play with to keep the code simple.

[SteveTheTechie]

Agreed. That is the approach I am going with. Additionally, if we want to take it a step further and replace the jQuery function calls w/ the JavaScript equivalents in selected locations (e.g. _makeOption), we will already have the appropriate starting place for that.

[mlh758]

_makeOption would probably be the place that would receive the most benefit since that's where most of the jQuery API calls are going to be. Each drop down presumably will have many options.

[mlh758]

Closing this for #731