0

.child-1要素にスタイルを動的に適用.child-2し、CSS クラスを追加する必要があります。

#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と 2 にのみスタイルを適用し#child-1、 にはスタイルを追加しません#large-container。

アドバイスありがとうございます！

4

1 に答える 1

1

私の答えはプロファイラーから確認することは不可能だと思いますが（ページのレンダリングなどに関してcss / htmlプロファイリングツールはありますか？）私の経験に基づいて述べます：

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

よりも速い

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

単に、DOMツリーを2回ではなく1回トラバースしているためです。つまり $('#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最適化に関しては、最もコストのかかる操作の1つはDOMツリートラバーサルです。

$('#parent').addClass('myClass1 myClass2');DOMツリーを1回トラバースしている場合（つまり、cssカスケードを使用して絞り込まれたDOMサブツリー内#parentの要素に適用する場所を見つける）#parent

@tMagwellが#large-containerここで再描画に関して提起した懸念に対処するために、cssを適用するもう1つの最適化された方法があります。

// 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にのみ適用したい場合..次に使用できます //ここで、 siblings（）は配列を返す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あり、操作にいくらかコストがかかります。それがどれほど高価かを定量化する方法はありません（ブラウザのレンダリングエンジンなどによって異なります）が、それで十分です。親divにclass1とclass2を追加しただけではない場合よりも高いコストxがあると言います。

于 2013-02-09T08:41:54.127 に答える