38

これは長いものになるので、カウボーイをサドルアップしてください. 午前中は古いコードのいくつかを調べていましたが、ベスト プラクティスと最適化について疑問に思っています。主観的なレーンに乗り込むのを避けるために、いくつかの例を投稿し、質問に簡単に答えられることを願っています。答えを簡単にし、間違いの可能性を減らすために、例を非常に単純に保つようにします. どうぞ：

1) 割り当てと jQuery 呼び出し

セレクターにアクセスするときは、同じ呼び出しを複数回行うよりも、セレクターを変数に割り当てる方が一般的に良いと考えられていることを理解しています-例.

$('div#apples').hide();
$('div#apples').show();

対。

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

jQuery の を参照するときに、これと同じ規則が適用されます$(this)か? 元。テーブル内の一部のデータをクリック可能にし、リンクをカスタマイズする簡単なスクリプト。

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

対。

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2)this対$(this)

さて、この次のものは私が長い間疑問に思っていたことですが、それに関する情報を見つけることができないようです. 無知をお許しください。thisjQuery をラップするのではなく、バニラ js を呼び出すのはいつ意味があり$(this)ますか? 私の理解では -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

this次のようなバニラ オブジェクトの DOM 属性にアクセスするよりもはるかに効率的ではありません-

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

そこで何が起こっているのかは理解していますが、どちらを使用するかを決定する際に従うべき経験則があるかどうか疑問に思っています。

3) 特異性が高いほど常に優れていますか?

これは非常に単純ですが、セレクターをより具体的にすることは常に有益ですか? $('.rowStripeClass')よりもはるかに遅いことは簡単にわかります$('#tableDiv.rowStripeClass')が、どこで線を引きますか? $('body div#tableDiv table tbody tr.rowStripeClass')まだ速いですか？任意の入力をいただければ幸いです。

ここまでたどり着いたら、見てくれてありがとう！まだの場合は、:p </p>

4

6 に答える 6

37

私はこれらにできるだけ簡潔に答えようとします：

  1. 特にループの状況で頻繁に使用される場合はキャッシュしてください。同じコードを実行して同じ結果を得ることは、パフォーマンスにとって決して良いことではありません。キャッシュしてください。

  2. thisDOM 要素のみが必要な場合、およびjQuery メソッド$(this)が必要な場合 (それ以外の場合は利用できない場合) に使用します。vs の例は完璧です。いくつかのより一般的な例: this.id$(this).attr("id")

    • this.checkedの代わりに使用$(this).is(':checked')
    • $.data(this, 'thing')の代わりに使用$(this).data('thing')
    • jQuery オブジェクトの作成が基本的に役に立たないその他のケース。

  3. パフォーマンスのためには、ID セレクターからの派生が優先されます。どの程度具体的にする必要がありますか? 要するに、それは完全に依存します。必要なだけ具体的にしてください。

于 2010-07-12T17:46:33.623 に答える
9

1）割り当てとjQuery呼び出し

jQueryの$（this）を参照するときに、これと同じルールが適用されますか？

そのとおり。関数を呼び出すと$、新しいjQueryオブジェクトが作成され、それに関連するオーバーヘッドが発生します。同じセレクターでを複数回呼び出すと$、毎回新しいオブジェクトが作成されます。

2）これと$（これ）

オブジェクトをjQueryでラップしないことが重要になる場合があるため、違いを知ることは重要だと思います。ほとんどの場合、時期尚早の最適化を行うのではなく、一貫性を保つために、常に$（this）でラップし、できれば変数にキャッシュします。<ul>ただし、 100万個<li>の要素を含む順序付けされていないリストのこの極端な例を考えてみましょう。

$("#someList  li").each(function() {
    var id = $(this).attr('id');
});

新しいオブジェクトをまったく作成せずに実行できた場合、100万個の新しいオブジェクトが作成され、パフォーマンスが大幅に低下します。すべてのブラウザで一貫している属性とプロパティの場合、jQueryでラップせずに直接アクセスできます。ただし、そうする場合は、多くの要素が処理されている場合に限定するようにしてください。

3）より特異性は常に優れていますか？

常にではない。これは主にブラウザに依存します。アプリケーションで何かがかなり遅く実行されていることが確実にわかっていない限り、マイクロ最適化について詳しく調べる価値はありません。例えば：

$("#someElement") vs $("#someElement", "#elementsContainer")

IDで要素を検索するときにコンテキストも提供されるため、2番目のクエリの方が高速になるように見えるかもしれませんが、その逆です。最初のクエリはネイティブへの直接呼び出しに変換されますがgetElementById(..)、2番目のクエリはコンテキストセレクターのために変換されません。

また、一部のブラウザは、を使用してクラス名で要素にアクセスするためのインターフェイスを提供しgetElementsByClassName、jQueryはより高速な結果を得るためにそれらのブラウザにそれを使用する場合があります。その場合、次のようなより具体的なセレクタを提供します。

$("#someElement.theClass")

単に書くよりも実際には邪魔になるかもしれません：

$(".theClass")
于 2010-07-12T18:00:30.927 に答える
4

このブログはそれほど古いものではありませんが、質問への回答と、jquery を使用した場合のサイトの高速化に関する詳細情報を提供しています: http://www.artzstudio.com/2009/04/jquery-performance-ルール/

私のお気に入りの 1 つは、DOM 操作を制限することを述べている 6 番です。for ループで .append を実行するのは常に悪いことです。なぜなら、毎回 DOM に追加するのはコストのかかる操作だからです。

于 2010-07-12T17:44:42.803 に答える
4

ご質問まで：

  1. jQuery オブジェクトをキャッシュすると、最高のパフォーマンスが得られます。何度も実行すると遅くなる可能性のあるDOMルックアップを回避します。jQuery チェーンの恩恵を受けることができます。ローカル変数が必要ない場合もあります。
  2. $(this)thisが DOM 要素の場合も同様です。これが jQuery オブジェクトを取得する最速の方法であるという事実にもかかわらず、それでもキャッシングよりは遅くなります。通常の DOM 要素で十分な場合は、jQuery をまったく呼び出さないでください。id 属性の例は素晴らしいです - $(this) を必要としない場合は、 $(this).attr('id) より this.id をお勧めします
  3. より具体的なセレクターは、DOM ルックアップ時間を実際に短縮します。ただし、実際には一線を画す必要があります。セレクターをより具体的にするのは、パフォーマンスが明らかに改善されると 100% 確信している場合に限ってください。
于 2010-07-12T17:49:26.457 に答える
3

注目すべき唯一の状況は、ループとイベントです。これらのいずれかで行うすべてのアクションは、すべての反復またはすべてのイベントで実行されるためです。

  1. 割り当てとjQuery呼び出し

    あなたの例は最高ではありません。jQueryオブジェクトへの参照を保存する必要がある場所は、ループやイベントで使用される場所、または複雑なクエリの結果である場所です。

  2. これ対$（これ）

    繰り返しますが、パフォーマンスが重要な状況では、生のdomの方が優れています。それ以外は、どちらが短いか、より読みやすいかを選択する必要があります。驚いたことに、必ずしもjQueryであるとは限りません。

  3. より特異性は常に優れていますか？

    通常人々によって混乱されるより多くのタイプの特異性があります。そのうちの1つは役に立たない。たとえば、IDセレクターのタグ名のtag#id場合、単純なIDよりも遅くなります。しかし、具体的にすることが大きなメリットになる場合は、別のタイプがあります。現在、このタイプはブラウザに依存します。これは、最新のものは古いものを犠牲にするためですが、トレードオフの価値があります。これは、にaを指定した場合に発生します。IE 6-7では、sizzleが高速機能を利用できるため、単純なものよりも大幅に高速になります。もう1つのタイプは、指定する祖先が多すぎる場合です。この意志tagclass tag.class.classdocument.getElementsByTagNameすべてのブラウザで速度が低下します。これは、セレクターが右から左に実行されるためです。覚えておくべきルール：常に可能な限り具体的な右端のセレクターにしてください。

于 2010-07-12T17:59:53.850 に答える