Mootools的removeClass在IE上运行非常慢

Question

我在mooTools.addClass中的同一组元素上应用了addClass和removeClass，工作正常，但是removeClass花费了大约6-7秒的时间，请参阅下面的代码。

    $('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. 你同样的操作做了两次。在同一实例中，您可以使用removeClass
2. doing和want.
3. el.getParents()，addClass element.getElements("input[class=emailmessages]") vs element.getElements("input.emailmessages")可能较慢，但可能会返回包含其他类的输入，而您可能不会返回所有父类。然后再次迭代它们。两次。你确定你的意思不只是.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你可以做得更简单：

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

下面的代码将返回所有的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的底线：

• 缓存到var中的查找结果。如果调用$("someid")两次，请将其缓存到您的作用域中。如果你执行两次$("someid").getElements()，性能就会差两倍以上……然后添加两次.getParents()，那就是...现在n倍的糟糕...
• 避免像这样将chaqined方法应用于集合：collection.addClass("foo").removeClass("bar") -它将迭代它两次或n次，转而使用单个.each回调，它会快得多。
• 尝试避免反向组合符或父级查找如果可能，请直接执行。您可以使用nth-child等其他方法遍历您的DOM，而不是到达输入并返回。特别是当你并不真正需要输入的时候，itself...
• .getParents(selector)会限制你想要的父母的类型。.getParents()将返回buckloads，一直到父/锚点dom节点，通常包括相同的siblings.
• always使用匿名函数创建一个局部作用域，这样你就不会污染全局对象或较高作用域- IE不喜欢这样，并使访问变量变慢。

希望这至少是有意义的:)祝你好运，记住，速度只是相对的，和你在你支持的最慢的浏览器上的表现一样好。