虽然我认为我的答案无法通过分析器验证(在呈现页面等方面是否有任何 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 级联应用到缩小的DOM 子树中的元素的位置#parent
为了解决@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 是您要定位的孩子的索引,因为兄弟姐妹()返回一个数组
希望这可以帮助!
更新:
为了解决您在评论中提出的这一具体问题:
当我向#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。