家长(),更快的替代方案？

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(),比如:$(this).closest('.dashdiv')

从引擎的角度来看,它并不是更快,因为你仍然在DOM层中循环,但是对于新手和更短的代码来说更清楚.

评论

如果它是你所追求的纯粹速度,你可以完全跳过jQuery并使用它node.parentNode.但是这已经进入了计算周期的难题,我认为这是一个学术问题.

如果您正在为主要生产编写高性能代码,例如商业搜索引擎或网络邮件提供商,那么计算周期很重要,因为任何小优化都会成倍增加数倍.尽管如此,我怀疑你是在编写那种代码.

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

相反,考虑下一个将要查看代码的开发人员更为重要.对于那个开发人员来说,拥有清晰,编写良好的代码非常重要,可以立即传达它正在做的事情.眼睛模糊的方法链parent().parent().parent()可能会让其他开发者模糊不清,更不用说了node.parentNode.parentNode.parentNode

- 这就是为什么.closest()首先创建的原因.它清晰,简洁,并不比它取代的链条效率低得多.千分之九千,这是你应该去的方式.