Performance improvements ? about ember-cli-selectize HOT 6 OPEN

Thank you for the report.

Right now I'm a bit tight on time.
If you could provide me a jsbin of a scenario like this, I could definitely to take a look.

If you're wondering how to use ES6 classes on jsbin, just copy and paste the component code in a globals Component there. 😄

from ember-cli-selectize.

Here is a JSbin : http://emberjs.jsbin.com/hoqenocira/2/edit?html,js,output
(I had to add the ember-new-computed code)

It detects an infinite/too long loop, so I added // noprotect in selectionArrayWillChange.
I could not reproduce the really slow performance I observe in my app, so I might have other problems..

from ember-cli-selectize.

Seems pretty fast as well to me, but that might be because we're using fixtures here. I can also see that selectionArrayDidChange is running multiple times per route change.
I believe this is related with the selection=model.items.content part and thus related with #58. We should probably wait until the promise resolves to bind the observer.
Will do further investigation.

from ember-cli-selectize.

Here I test if selection is a promise, and only bind array observers when it is resolved:
http://emberjs.jsbin.com/rogenifopa/1/edit?html,js,console,output

Looks good. selectionArrayDidChange runs only once. Seems the way to go.

from ember-cli-selectize.

Edit: looks like that was already happening in your jsbin. My mistake.

Bottomline, your JSBin doesn't seem to have anything wrong with it and probably does not reproduce the problem in your app?

from ember-cli-selectize.

One of the main differences with my app is the use of templating (optionFunction, itemFunction).

I've done some profiling on my app.
Most of the time is spend in selectize, method updateOriginalInput, which keeps the original input up-to-date (which does not matter in ember-selectize).

Adding the following plugin to Selectize helps a lot (from 0.8s to 0.4s) :

Selectize.define('optimised', function(/*options*/) {
    // options: plugin-specific options
    // this: selectize instance
    var self = this;
    this.updateOriginalInput = (function() {
        var original = self.updateOriginalInput;
        return function(opts) {
            opts = opts || {};

            // constant in Selectize
            var TAG_SELECT    = 1;

            if (self.tagType === TAG_SELECT) {
                // copy the final action, bypasses a loop on all items and many HTML operations
                if (self.isSetup) {
                    if (!opts.silent) {
                        self.trigger('change', self.$input.val());
                    }
                }
            } else {
                // use the original full method
                original.apply(this, arguments);
            }
        };
    })();
});

After this change, most of the time is spent in the methods ObjectWasRemoved and selectionObjectWasAdded, and inside them, the time is spent in selectize setCaret and positionDropdown when removing the items, and in refreshOptions when adding items.

from ember-cli-selectize.