次のうち、Jquery で使用するのに適したオプションはどれかを尋ねたかっただけです。
$('#thisontainer div.thisWrapper')
また
$('#thisontainer .thisWrapper')
2番目の方が速いですか?
また、Jquery セレクターに追加すると html タグのパフォーマンスが低下する理由を知りたいのですが、CSS セレクターも信じていますか?
ありがとうございました
クラス属性がある場合は、タグ名では使用せず、クラス名のみを使用してください
ランキングあり。
http://www.vanseodesign.com/css/css-selector-performance/
それが言おうとしているのは、id が最も速く、次にクラス、そしてタグであるということです。
タグが遅い理由は、舞台裏でブラウザーがページ上のすべてのデータをマップするためです。このようなことを言うとa.mySweetClass
、左から右に解析されます。したがって、すべてのa
タグが取得され、A タグから に削減されmySweetClass
ます。私ははるかに良い記事を読んだので、それを見つけることができたらいいのにと思います。私は引き続き調べて、すぐにいくつかのより良いタイミング グラフも提供します。
CSS セレクターは右から左に評価されます。
私の悪い:しかし、ここにいくつかの興味深い結果があります http://jsperf.com/jquery-tag-vs-class
どちらにしても大きな違いはないと思います。
html タグのレンダリングと css ルールまたは jQuery セレクターの処理はコストのかかるタスクであり、許容できるパフォーマンスを維持するには、慎重に使用する必要があります。非常に単純な CSS ルールでさえ重大なパフォーマンスの問題を引き起こす状況を見つけるようになりました。
だからここにいくつかのアドバイスがあります:
CSS ルールを作成するときはいつでも、それがどのように処理されるかを考えてください。ノードごとに画像を個別に処理する必要があるため、すべてのノードの背景としてアニメーション GIF を使用すると、サイトの速度が大幅に低下する可能性があります。}
DOM 全体でノード検索を繰り返す代わりに、既に見つけた DOM ツリーのセクションでノードを検索します。したがって、代わりに:
for(var i=0; i < 100; i++)
$('#thisontainer .something').somecall();
使用する:
var c = $('#thisontainer');
for(var i=0; i < 100; i++)
$('.something', c).somecall();
setInterval または setTimeout 呼び出しで DOM に加える変更には注意してください。通常、DOM の変更は単純な変数処理よりもコストがかかるため、重要な値を属性として保存する代わりに、jQuery の .data() を使用して JavaScript オブジェクトに保存します。