Javascript 添加CSS类的性能&；儿童人数

我需要通过添加CSS类，对元素

.child-1

和

.child-2

动态应用一些样式

我应该将它们添加到

#parent

还是每个

.child-

？如果我将其添加到

#parent

中，

#大型容器

的存在会影响性能吗

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

与CSS相同：

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

myClass1 myClass2

仅将样式应用于

#child-1

和2，它们不会向

#大型容器

添加任何样式

---

谢谢你的建议

尽管我认为我的答案不可能从剖析器中得到验证（有没有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的情况下工作。。如果你有孩子3，孩子4。。child-n，并且只希望将其应用于child-n。。然后你可以用
child1element.sibbines（）[n]
//其中n是要作为目标的子级的索引，因为返回一个数组

希望这有帮助

更新：

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

当我向父类添加类时，“大容器”的存在是否会减慢速度

答案是肯定的。让我给你一个场景，它肯定会：

css:

html:


你好，世界

所以在这个例子中。。放置在
#parent.class1.class2
下的
字体大小：10pt
肯定会影响
#大型容器
的内容。。而且手术要花点钱。。我无法量化这有多贵（这取决于浏览器渲染引擎等）。。但只需说，有一些成本x比不将class1和class2添加到父div中要高。
没有太大的差异，ID选择器速度很快。将类添加到#父对象不会因为#大容器而导致某种巨大的重新绘制吗？在css中，您定义了
.myclass1#child1
，所以超大容器（或者是否如此）无关紧要。要优化jq缓存，请使用jquery对象或树中的至少一个对象，然后使用
·从缓存中访问。查找
它被认为是最快的，这是我的问题：）当我将类添加到#父对象时，#大型容器的存在是否会减慢某些速度？简短的答案是肯定的。。如果将类添加到父类中，大型容器的存在将带来一些性能成本。。我更新了我的报告，以详细说明这个具体案例
<div id="parent">
    <div id="child-1"></div>       

    ... lots and lots of html nodes 

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

</div>

// 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');

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

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