親（）、より速い代替？

Question

私はdivのダッシュボードで作業しており、各divにはボタンがあるツリーがあります。そのdivのidがどのようなものなのか知るたびに、私はparent（）alotを使っています。

私は変数divを設定できるように、主にdivのIDを見つけるために$(this).parent().parent().parent()を行っています。アプリは各divのIDに基づいています。

parent（）を3回まで使用するのは時間がかかると思いますが、すべての機能にはかなりの影響がありますか？

他の方法はありますか？

私はより速いものを示すベンチマークスタイルのようなものを探しています。ここで

は、ツリーの例です。

<div id="6179827893" class="dashdiv"> 
    <div class="buttons"> 
    <li><a href="#" class="btn1">Button 1</a></li> 
    <li><a href="#" class="btn2">Button 2</a></li> 
    <li><a href="#" class="btn3">Button 3</a></li> 
    <li><a href="#" class="btn4">Button 4</a></li> 
    <li><a href="#" class="btn5">Button 5</a></li> 
    <li><a href="#" class="btn6">Button 6</a></li> 
    </div> 
    <div class="dashcontent"> 

    .... 

    </div> 
</div> 

Answer 1

同じ効果を達成するためのオプションがいくつかあります。

ベンチマーク：http://jsperf.com/parents-method。このベンチマークによれば、私の方法はあなたの方法より約100倍高速です。

Method (see below) : Operations per second (higher is better) 
parentNode3x  : 4447k 
$(parentNode3x) : 204K 
$().closest  : 35k 
$().parents  : 9k 
$().parent()3x  : 44k 

// Likely the fastest way, because no overhead of jQuery is involved. 
var id = this.parentNode.parentNode.parentNode.id; 

// Alternative methods to select the 3rd parent: 
$(this.parentNode.parentNode.parentNode) // Native DOM, wrapped in jQuery 

// Slowpokes 
$(this).closest('.dashdiv')    // Hmm. 
$(this).parents('.dashdiv:first')  // Hmm... 

Answer 2

あなたは.closest()を使用したほうが良いかもしれませんが、このように：あなたがしているので、$(this).closest('.dashdiv')

それは、任意の速いビューのエンジンの視点からではありませんまだDOMレイヤーをループしていますが、新しいコードや短いコードのほうがはっきりしています。

コメンタリー

それはあなたが後にしている純粋な速さなら、あなたにも完全にjQueryをスキップして、代わりにnode.parentNodeを使用する場合があります。しかし、これは数え切れないほどのサイクル数の問題に繋がります。私はそれが学問的なものだと思っています。

商用検索エンジンやウェブメールプロバイダのような大量生産用の高性能コードを作成する場合は、小規模な最適化に何千倍も乗算されるため、計測サイクルが重要です。すべての敬意を払って、私はあなたがその種のコードを書いているのか疑問に思います。

一度にいくつかの人にヒットするものを書いている場合、小さな最適化は顕著な方法で結果に影響を与えない知的エクササイズです。どのユーザーも気付き始める前に、コードの効率を数百ミリ秒改善しなければならないでしょう。このコードはそれを実行しません。

代わりに、次のの開発者について考えてみることが、あなたのコードを見る人にとってははるかに重要です。その開発者にとっては、それが何をしているのかをすぐに伝える、明確でよく書かれたコードを持つことが重要です。 .closest()が最初の場所で作成された理由である - node.parentNode.parentNode.parentNode

の何も言わないし、他の開発者を不明瞭と混同することができますparent().parent().parent()のような方法でチェーンを目をぼかし。それは、それが置き換えられるチェーンよりはっきりと簡潔であり、著しく効率的ではない。 1000回のうち999回、あなたが行かなければならない方法です。

Answer 3

まず、時期尚早に最適化しないでください。それが問題を引き起こしていない場合（そしてあらゆるプラットフォームで徹底的にテストしてください）、心配しないでください。

可能な最適化があります：ネイティブのDOMプロパティを使用します。

var id = this.parentNode.parentNode.parentNode.id; 

注これを行うには素敵なjQueryの方法は（遅くなりますが、それは問題ではないかもしれない）closestであること：

$(this).closest('div.dashdiv').prop('id'); 

Answer 4

ハンドラが現在<a>要素にある場合は、代わりに.dashdiv要素に配置します。

e.targetが<a>の場合、this.idを実行できます。

$('.dashdiv').click(function(e) { 
    if(e.target.nodeName.toLowerCase() === 'a') { 
     alert(this.id); 
    } 
});