removeClass из Mootools очень медленно работает в IE

Question

Я применяю addClass и removeClass к одному и тому же набору элементов в mooTools.addClass работает нормально, но removeClass занимает слишком много времени примерно 6-7сек. Пожалуйста, смотрите код undeneath.

    $('usermailbox').getElements('input[class=emailmessages]').each(function(el){
            el.getParents().addClass('unChecked');//works fine
    }); 

    $('usermailbox').getElements('input[class=emailmessages]').each(function(el){
            el.getParents().removeClass('selected'); //Takes too long in IE
    });

Есть ли у меня надежда

Answer 1

правый.Несколько проблем здесь ... Очевидно, что без просмотра DOM это немного сложно определить, но:

1. вы делаете одни и те же операции дважды.в этом же случае вы можете добавить addClass и removeClass

2. выполнение element.getElements("input[class=emailmessages]") против element.getElements("input.emailmessages"), вероятно, медленнее, но может возвращать входные данные, которые также имеют другие классы, которые вам могут не понадобиться.

3. el.getParents () вернет всех родителей.затем вы повторяете их снова.дважды.Вы уверены, что не имеете в виду просто .getParent(), единственное число?Если это так, или если у него только один родитель, вы применяете .each к одному элементу, что является ненужным попаданием.

4. , если ваша логика должна остаться, рассмотрите это какодна итерация:

хранить и ходить.

var parents = el.getParents(); 
parents.each(function(p) { 
    p.addClass("unchecked").removeClass("selected"); 
});

всего:

$("usermail").getElements("input.emailmessages").each(function(el) {
    var parents = el.getParents(); 
    parents.each(function(p) { 
        p.addClass("unchecked").removeClass("selected"); 
    });

});

конечно, с Slick / mootools 1.3 выможно сделать это намного проще:

в этом домене:

<div id="usermailbox">
    <div class="selected">
        <input class="emailmessages" />
    </div>
    <div class="selected">
        <input class="emailmessages" />
    </div>
    <div class="selected">
        <input class="emailmessages" />
    </div>
</div>

следующее вернет все div:

// gets parents via a reverse combinator. you can do !> div or whatever to be more specific
// document.getElements("#usermailbox input.emailmessages !") will return all parents...
// ... in a single statement, inclusive of body, html etc... same as getParents
var divs = document.id("usermailbox").getElements("input.emailmessages !> "); 
// single iteration per parent:
divs.each(function(div) {
    div.removeClass("selected").addClass("unChecked");
});

конечно, вы можете простосделайте $("useremail").getElements("div.selected,div.unChecked") чтобы попасть в эти div в любое время ... так что все зависит от вашей DOM и потребностей, должна быть причина, почему вы делаете то, что делаете.

нижняя строка дляperf:

• кэшировать результаты поиска в переменные.если вы звоните $("someid") дважды, кэшируйте его в своей области видимости.если вы сделаете $("someid").getElements() дважды, это будет более чем в два раза хуже по производительности ... и добавите .getParents() дважды, то есть ... теперь в n раз хуже ...

• избегайте применения методов chaqined к таким коллекциям, как это: collection.addClass("foo").removeClass("bar") - он будет повторять его дважды или n раз, вместо этого будет использоваться один .each обратный вызов, это будет намного быстрее.

• старайтесь избегать обратных комбинаторов или родительских поисков, если это возможно, идите прямо.Вы можете использовать nth-child и т. д. - другие способы обхода DOM, кроме как попасть на вход и вернуться назад.Особенно, когда вам действительно не нужен сам ввод ...

• .getParents(selector) ограничит типы родителей, которых вы хотите..getParents() будет возвращать нагрузку, вплоть до родительского / якорного узла, часто включая одни и те же для братьев и сестер.

• всегда создайте локальную область с анонимными функциями, так что вы не будетене загрязняет ваш глобальный объект или верхнюю область видимости - IE это не нравится и делает доступ к переменным медленным.

Надеюсь, что кое-что из этого имеет смысл, по крайней мере :) Удачи и помните, скоростьтолько относительный и так же хорошо, как ваша производительность в самом медленном браузере, который вы поддерживаете.