16

jQuery を使用して最初の子要素を選択する最速の方法について、多くの議論を見てきました。予想どおり、ネイティブ DOM の firstChild プロパティは、jQuery セレクターまたはセレクターの組み合わせを使用するよりもはるかに高速です。 http://jsperf.com/jquery-first-child-selection-performance/6を参照してください。これは通常、問題にはなりません。パフォーマンスが重要ではない場所で使用されているか、DOM 要素にアクセスしてその .firstChild プロパティを使用するだけで十分簡単です。ただし、これにはいくつかの問題があります。

  • jQuery セレクターが返すように、firstChild は要素ではなく、テキストまたはコメント ノードを返すことができます。
  • 複数の要素の最初の子を選択する必要がある場合は、低速のセレクターを使用するか、DOM 要素を反復処理してコレクションに追加し、jQuery オブジェクトに戻すという余分な作業を行う必要があります。

コア jQuery ライブラリに firstChild メソッドを追加するコストは、メリットよりもはるかに小さいように思えます。私は自分で使用するためにそのようなメソッドを作成することに自分のショットを取りました:

$.fn.firstChild = function() {
    var ret = [];

    this.each(function() {
        var el = this.firstChild;

        //the DOM firstChild property could return a text node or comment instead of an element
        while (el && el.nodeType != 1)
            el = el.nextSibling;

        if (el) ret.push(el);
    });

    //maintain jQuery chaining and end() functionality
    return this.pushStack(ret);
};

http://jsperf.com/jquery-multiple-first-child-selectionで作成したテストでは、この関数は他のどのオプションよりも 5 倍以上高速に実行されます。テストは上記のテストに基づいていますが、単一の要素ではなく、複数の要素の最初の子を選択しています。

足りないものはありますか？私が使うべきテクニックは？それとも、これは決して心配する必要のない問題ですか? このような関数をjQueryに含めない理由はありますか?

4

2 に答える 2

12

「jQueryが.firstChildメソッドを提供しないのはなぜですか？」

フィーチャークリープ、おそらく。

あなたが述べたように、それは他の方法で達成することができ、パフォーマンスが懸念される場合は、あなたが行ったようにその特定のニーズのためにjQueryを拡張することができます。

コードのパフォーマンスをもう少し向上させることができます...

$.fn.firstChild = function () {
    var ret = [];
    // use a for loop
    for (var i = 0, len = this.length; i < len; i++) {
        var this_el = this[i],
            el = this_el.firstElementChild; // try firstElementChild first
        if (!el) {
            el = this_el.firstChild;
            while (el && el.nodeType != 1)
                el = el.nextSibling;
        }
        if (el) ret.push(el);
    }
    //maintain jQuery chaining and end() functionality
    return this.pushStack(ret);
};
于 2012-04-11T01:38:49.133 に答える
0

単一要素のケースでは、

$('.test > eq(0)')

これは、速度がほぼ一致しているようです..

http://jsperf.com/jquery-multiple-first-child-selection/2

于 2012-04-11T01:59:51.513 に答える