Javascript Mootools的removeClass在IE上非常慢

我正在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
    });

---

我还有希望吗？

对。这里有几个问题。。。显然，在没有看到DOM的情况下，有点难以确定，但是：

同样的操作要执行两次。在同一个实例中，您可以添加类和移除类

执行

element.getElements（“input[class=emailmessages]”）与
element.getElements（“input.emailmessages”）
可能比较慢，但可能会返回包含您可能不需要的其他类的输入

el.getParents（）将返回所有父对象。然后再次迭代它们。两次。你确定你的意思不是单数的

.getParent（）

？如果是这样，或者如果它只有一个父元素，则在单个元素上应用.each，这是不必要的命中

＞P>如果您的逻辑需要保留，则将其视为一个迭代：

商店和步行

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>

当然，您只需执行

$（“useremail”）.getElements（“div.selected，div.unChecked”）

即可随时访问这些div。。。。因此，这完全取决于您的DOM和需求，必须有一个原因来解释您为什么要这样做

性能的底线：

• 将查找结果缓存到变量中。如果调用

  $（“someid”）

  两次，请将其缓存在您的作用域中。如果您执行两次

  $（“someid”）.getElements（）

  ，则性能会差两倍多。。。然后添加两次

  .getParents（）

  ，这就是。。。现在坏了n倍

• 避免对这样的集合应用chaqined方法：

  collection.addClass（“foo”）.removeClass（“bar”）

  -它将迭代它两次或n次，使用单个

  。相反，每次
  回调都会快得多
  

• 尽量避免反向组合符或父查找。如果可能，请直接查找。您可以使用

  nth child

  etc-其他方式来遍历DOM，而不是访问输入并返回。特别是当你真的不需要输入的时候

• .getParents（选择器）

  将限制所需的父项类型

  .getParents（）

  将返回负载，一直到父/锚dom节点，通常包括兄弟节点的相同负载

• 始终使用匿名函数创建一个局部作用域，这样就不会污染全局对象或更高的作用域-IE不喜欢这样，并且会使访问变量的速度变慢

---

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

对。这里有几个问题。。。显然，在没有看到DOM的情况下，有点难以确定，但是：

同样的操作要执行两次。在同一个实例中，您可以添加类和移除类

执行

element.getElements（“input[class=emailmessages]”）与
element.getElements（“input.emailmessages”）
可能比较慢，但可能会返回包含您可能不需要的其他类的输入

el.getParents（）将返回所有父对象。然后再次迭代它们。两次。你确定你的意思不是单数的

.getParent（）

？如果是这样，或者如果它只有一个父元素，则在单个元素上应用.each，这是不必要的命中

＞P>如果您的逻辑需要保留，则将其视为一个迭代：

商店和步行

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>

当然，您只需执行

$（“useremail”）.getElements（“div.selected，div.unChecked”）

即可随时访问这些div。。。。因此，这完全取决于您的DOM和需求，必须有一个原因来解释您为什么要这样做

性能的底线：

• 将查找结果缓存到变量中。如果调用

  $（“someid”）

  两次，请将其缓存在您的作用域中。如果您执行两次

  $（“someid”）.getElements（）

  ，则性能会差两倍多。。。然后添加两次

  .getParents（）

  ，这就是。。。现在坏了n倍

• 避免对这样的集合应用chaqined方法：

  collection.addClass（“foo”）.removeClass（“bar”）

  -它将迭代它两次或n次，使用单个

  。相反，每次
  回调都会快得多
  

• 尽量避免反向组合符或父查找。如果可能，请直接查找。您可以使用

  nth child

  etc-其他方式来遍历DOM，而不是访问输入并返回。特别是当你真的不需要输入的时候

• .getParents（选择器）

  将限制所需的父项类型

  .getParents（）

  将返回负载，一直到父/锚dom节点，通常包括兄弟节点的相同负载

• 始终使用匿名函数创建一个局部作用域，这样就不会污染全局对象或更高的作用域-IE不喜欢这样，并且会使访问变量的速度变慢

---

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

。感谢您提供的所有信息。它确实改变了我的外观，使我可以看到选择器。在我的代码中，两段代码都是互斥的，即它们在不同的事件中执行。在这两段代码中，我都获得了相同的元素集和选择器查询占用的时间是相同的。它的removeClass占用了时间。如果我使用removeClass代替addClass，它的工作状态很好。没关系。我知道他们会在不同的事件中执行，但如果元素没有改变，