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，有点难以确定，但是：

您执行两次相同的操作。在同一个实例中，你可以添加addClass和removeClass
执行element.getElements("input[class=emailmessages]") vs element.getElements("input.emailmessages")的速度可能较慢，但可能会返回包含您可能不需要的其他类的输入。
el.getParents（）将返回所有父母。然后再次迭代它们。两次。你确定你的意思不仅仅是.getParent()，单数吗？如果是这样，或者如果它只是一个父元素，那么你在单个元素上应用.each，这是一个不必要的命中。
如果您的逻辑需要保留，那么请将其视为单次迭代：

存储和散步。

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的底线：

将查询结果缓存到变量中。如果您拨打$("someid")两次，请将其缓存在您的范围内。如果你做$("someid").getElements()两次，那是性能差异的两倍以上......并且两次加.getParents()，那......现在已经很糟了......
避免将chaqined方法应用于这样的集合：collection.addClass("foo").removeClass("bar") - 它将迭代两次或n次，而是转换为单.each次回调，它会更快。< / p>
尽可能避免反向组合器或父母查找，直接进行。您可以使用nth-child等 - 其他方式来管理您的DOM而不是获取输入并返回。特别是当你真的不需要输入时......
.getParents(selector)会限制您想要的父母类型。 .getParents()将返回buckload，一直到父/锚dom节点，通常包括兄弟节点的相同。
总是使用匿名函数创建一个本地作用域，这样就不会污染全局对象或高级作用域 - IE不喜欢这样，并且使访问变量变慢。

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

在IE上删除Mootools的类很慢

1 个答案: