javascript - Mootools的removeClass在IE上非常慢

Question

我在mooTools中的同一组元素上应用addClass和removeClass。addClass工作正常，但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. 您执行相同的操作两次。在同一个实例中，您可以添加类和删除类

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 你可以做得更简单:

在此 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 和需求，您所做的事情必须有一个原因。

性能底线:

• 将查找结果缓存到变量中。如果您调用 $("someid") 两次，请将其缓存在您的作用域中。如果你执行 $("someid").getElements() 两次，那么性能会差两倍以上......并且添加 .getParents() 两次，那就是。 ..现在糟糕了n倍...

• 避免对集合应用 chaqined 方法，如下所示:collection.addClass("foo").removeClass("bar") - 它将迭代两次或 n 次，请选择相反，使用单个 .each 回调，速度会快得多。

• 如果可能的话，尽量避免反向组合器或父级查找，直接进行。您可以使用 nth-child 等 - 除了到达输入并返回之外，还可以使用其他方式来遍历 DOM。特别是当您并不真正需要输入本身时......

• .getParents(selector) 将限制您想要的父项类型。 .getParents() 将返回负载，一直到父/ anchor dom 节点，通常包括与兄弟节点相同的负载。

• 始终使用匿名函数创建本地作用域，这样就不会污染全局对象或上层作用域 - IE 不喜欢这样，并且会使访问变量变慢。

希望其中一些是有道理的，至少:)祝你好运并记住，速度只是相对的，并且与你在支持的最慢浏览器中的性能一样好。