Родитель(), более быстрая альтернатива?

Question

Я работаю с панелью divs, и каждый div имеет дерево, с которым расположены кнопки. Каждый раз, когда я должен знать, какой id этого div, я использую parent() alot.

В основном я делаю $(this).parent().parent().parent(), чтобы найти идентификатор div, чтобы я мог установить для него переменные. Приложение основано на идентификаторе каждого div.

Рассматривается ли медленное использование 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() было создано в первую очередь. Он понятен, краток и не менее эффективен, чем цепи, которые он заменяет. В 999 раз из тысячи, так вы должны идти.

Answer 3

Во-первых, не оптимизируйте преждевременно. Если это не создает проблемы (и тщательно проверяйте, на разных платформах), не беспокойтесь об этом.

Существует возможная оптимизация: использовать нативные свойства DOM:

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

Обратите внимание, что самый хороший JQuery способ сделать это (который будет медленнее, но это не может быть проблемой) является с closest:

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

Answer 4

Если обработчики в настоящее время на <a> элементов, поместите их на .dashdiv элементов вместо этого.

Тогда вы можете сделать this.id, если e.target был элементом <a>.

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