javascript - 添加CSS类和子级数的性能

我需要通过添加CSS类对元素.child-1和.child-2动态地应用一些样式。

我应该将它们添加一次到#parent还是每个.child-？如果将其添加到#parent，是否会存在#large-container影响性能？

<div id="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div id="large-container">
       <!-- a bunch of content here - p tags, images... -->
    </div>
</div>

（.child-1和.child-2是＃large-container顶部的绝对定位元素）

$('#parent').addClass('myClass1 myClass2');
vs
$('.child-1, .child2').addClass('myClass1 myClass2');

与CSS相同：

.myClass1 .child-1,
.myClass2 .child-2 {
  color: red;
}
/* vs */
.myClass1.child-1,
.myClass2.child-2 {
  color: blue;
}

myClass1 myClass2仅将样式应用于#child-1和2，它们不向#large-container添加任何样式。

谢谢你的建议！

最佳答案

尽管我认为我的答案无法从分析器中验证（是否存在用于渲染页面等的CSS / HTML分析工具？）我将根据经验进行说明：

$('#parent').addClass('myClass1 myClass2');

比...快

$('#child-1, #child2').addClass('myClass1 myClass2');

仅仅是因为您遍历dom树一次而不是两次，即
$('#child-1, #child2').addClass('myClass1 myClass2');与

$('#child-1).addClass('myClass1 myClass2');
$('#child-1).addClass('myClass1 myClass2');

从理论上证明最后一点，假设您的html代码看起来像这样：

<div id="parent">
    <div id="child-1"></div>

    ... lots and lots of html nodes

    <div id="child-2"></div>

</div>

那么与查找#child-1相比，查找#child-2是一个完全独立的操作。以及涉及CSS / html优化。.最昂贵的操作之一是DOM树遍历。

在$('#parent').addClass('myClass1 myClass2');的情况下，您遍历DOM树一次（即找到#parent然后使用CSS级联应用于缩小的#parent DOM子树中的元素的位置）

解决@tMagwell提出的有关重绘#large-container的问题，这是应用css的另一种优化方式：

// store the child-1 node in a variable.. ie whenever you
// refer to it in the future.. you won't have to traverse the entire DOM again
var child1element = $('#child-1');
$('#child-1).addClass('myClass1 myClass2');
// referring to child1element costs you nothing big, it's already stored in a variable
child1element.siblings().addClass('myClass1 myClass2');

这段代码当然是假设只有child-1和child-2 ..如果您有child-3，child-4 .. child-n并且只想将其应用于child-n ..则可以使用
child1element.siblings()[n] //其中n是要定位的子项的索引，因为siblings()返回一个数组

希望这可以帮助！

更新：

解决您在评论中提出的这一具体问题：

当我将类添加到#parent中时，＃large-container的存在会减慢某些速度吗？

答案是肯定的。让我给您一个肯定可以实现的方案：

CSS：

#parent .class1 .class2
{
  font-size:10pt;
}

的HTML：

<div id="parent">
    <div id="child-1"></div>
    <div id="child-2"></div>
    <div id="large-container">
      <!-- images etc -->
      <p>hello world!<p>
       <!-- many more p tags that has a lot of text and stuff -->
    </div>
</div>

所以在这个例子中.. font-size:10pt下面的#parent .class1 .class2肯定会影响#large-container的内容..并且操作要花一些钱..我无法量化它的昂贵程度（这取决于浏览器渲染引擎等）。但是可以肯定地说，存在一些成本x比如果您不只是将class1和class2添加到父div更高。

关于javascript - 添加CSS类和子级数的性能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14786056/

Child

javascript - 添加CSS类和子级数的性能