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

Question

我需要通过添加 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 添加任何样式。

谢谢指教!

Answer 1

虽然我认为我的答案无法通过分析器验证(是否有任何 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 级联将元素应用于 within 缩小的 #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 是您要定位的 child 的索引，因为 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>

所以在这个例子中.. #parent .class1 .class2 下的 font-size:10pt 肯定会影响 #large-container 的内容.. 并且操作会花费一些东西.. 我无法量化它有多昂贵(这取决于浏览器渲染引擎等).. 但足以说明有一些成本 x 更高与您不只是将 class1 和 class2 添加到父 div 相比。