Mootools的removeClass在IE上非常慢

Question

I am applying addClass and removeClass on same set of elements in mooTools.addClass works fine but removeClass takes too long approx 6-7sec.Please see the code 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
    });

Do I have any hope ?

Answer 1

Right. Several issues here... Obviously, w/o seeing the DOM it is a little difficult to determine but:

1. you do the same operations twice. in the same instance you can addClass and removeClass

2. doing element.getElements("input[class=emailmessages]") vs element.getElements("input.emailmessages") is probably slower but may return inputs that have other classes as well that you may not want.

3. el.getParents() will return all parents. you then iterate them again. twice. are you sure you don't mean just .getParent() , singular? if so, or if its one parent only, you are applying a .each on a single element, which is an unnecessary hit.

4. if your logic needs to remain then consider this as a single iteration:

store and walk.

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

all in all:

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

});

of course, with Slick / mootools 1.3 you can do it a lot more simple:

on this dom:

<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>

the following will return all the divs:

// 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");
});

of course, you can just do $("useremail").getElements("div.selected,div.unChecked") to get to these divs at any time anyway.... so it all depends on your DOM and needs, there must be a reason why you are doing what you are doing.

bottom line for perf:

• cache results of lookups into vars. if you call $("someid") twice, cache it in your scope. if you do $("someid").getElements() twice, that's more than twice as bad in performance... and add .getParents() twice, thats ... n-times as bad now...

• avoid applying chaqined methods to collections like this: collection.addClass("foo").removeClass("bar") - it will iterate it twice or n-times, go for a single .each callback instead, it will be much faster.

• try to avoid reverse combinators or parents lookups if possible, go direct. you can use nth-child etc - other ways to walk your DOM than to get to the input and walk back. Especially when you don't really need the input itself...

• .getParents(selector) will limit the types of parents you want. .getParents() will return buckloads, all the way up the parent / anchor dom node, often including the same ones for siblings.

• always create a local scope with anonymous functions so you don't pollute your global object or upper scopes - IE does not like that and makes accessing variables slow.

Hope some of this makes sense, at least :) good luck and remember, speed is only relative and is as good as your performance in the slowest browser you support.