Parent()，更快的替代方案？

Question

我正在使用 div 仪表板，每个 div 都有一个包含按钮的树。每次我都必须知道该 div 的 id 是什么，所以我经常使用parent()。

大多数情况下，我正在执行 $(this).parent().parent().parent() 来查找 div 的 ID，以便我可以为其设置变量。该应用程序基于每个 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()，如下所示：< code>$(this).closest('.dashdiv')

从引擎的角度来看，它并没有更快，因为您仍然在 DOM 层中循环，但对于新手来说也更清楚作为较短的代码。

注释

如果您追求的是纯粹的速度，您不妨完全跳过 jQuery 并使用 node.parentNode 代替。但这涉及到计数周期的棘手问题，我认为这是一个学术问题。

如果您正在为主要生产编写高性能代码，例如商业搜索引擎或网络邮件提供商，那么计算周期就很重要，因为任何小的优化都会成倍增加数千倍。恕我直言，我怀疑您正在编写这种代码。

如果你正在写的东西最多一次会被几个人点击，那么小的优化是一种智力练习，不会以任何明显的方式影响结果。在任何用户开始注意到之前，您必须将代码的效率提高数百毫秒，而此代码不会这样做。

相反，更重要的是要考虑下一个将查看您的代码的开发人员。对于开发人员来说，拥有清晰、编写良好的代码来立即传达其正在执行的操作非常重要。像 parent().parent().parent() 这样令人眼花缭乱的方法链可能会让其他开发人员感到困惑和困惑，更不用说 node.parentNode.parentNode.parentNode

-- 这就是首先创建 .closest() 的原因。它清晰、简洁，而且效率并不比它所取代的链条低。千分之九百九十九，这就是你应该走的路。

Answer 3

首先，不要过早优化。如果它没有引起问题（并通过各种方式在一系列平台上进行彻底测试），那么就不用担心。

有一个可能的优化：使用原生 DOM 属性：

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

请注意，最好的 jQuery 方法（速度会更慢，但这可能不是问题）是使用 closest：

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

Answer 4

如果处理程序当前位于 元素上，请将它们放在 .dashdiv 元素上。

如果 e.target 是 元素，那么您可以执行 this.id 。

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