Performance with large number of Collapse in v4.1

Created by: chtheis

I have a page with 6 collapsibles on it, each one with more than 20 in them, so I end up with about 140 collapsibles in total. The idea is to click on one of the outside collapsibles to see an overview list of collapsible items, click on one of the inner ones to see details of that item.

Unfortunately the performance is very bad: to open one the first time takes about 10 seconds!

I dug down to the constructor of the class Collapse:

        var tabToggles = $$$1(Selector.DATA_TOGGLE);

        for (var i = 0; i < tabToggles.length; i++) {
          var elem = tabToggles[i];
          var selector = Util.getSelectorFromElement(elem);

          if (selector !== null && $$$1(selector).filter(element).length > 0) {
            this._selector = selector;

            this._triggerArray.push(elem);
          }
        }

Nearly all time is spent in the for loop.

tabToggles is an array of all 140 elements with [data-target="collapse"].

First question: why do I need all of them when I click on one?

Then for each one it will get the selector and filter the list of all matching elements filter them for the element parameter. And that is where all the time is spent, almost equally distributed between getSelectorFromElement and $$$1(selector).filter(element)

getSelectorFromElement will select a list of matching elements and return either the selector, if some elements where found, or null if not. And the next statement in the code will do the same, then apply the filter.

Second question: Could we save time if we had a function like getSelectorFromElement which could do the filter(element), too ? I tried to pass the element to getSelectorFromElement and, if present, do the filtering there. This cut the time in half. But still, very slow.