JQuery селекторы и переменные

Question

Есть ли явное преимущество в производительности при написании

var e = $("#el");

e.css(...);
e.attr(...);
....
e.click(...);

вместо

$("#el").css(...);
$("#el").attr(...);
....
$("#el").click(...);

Answer 1

Да, в первой версии вы не находите элемент снова каждый раз, что всегда имеет некоторую стоимость. Также есть третий вариант, цепочка:

$("#el").css(...)
        .attr(...)
        .click(...);

Это более распространенный подход, который вы увидите, но стили варьируются в зависимости от разработчика ... библиотека была разработана с учетом цепочки. В вашем конкретном случае селектора идентификаторов стоимость document.getElementById() равна очень минимальная, с любым другим селектором она складывается намного быстрее.

Answer 2

Если под очевидными преимуществами вы подразумеваете очевидное для пользователя в данном случае ... тогда, вероятно, нет, поскольку никто не жалуется прямо сейчас . Если, с другой стороны, если вы имеете в виду очевидные преимущества по сравнению с жизненным циклом вашего кода (и с точки зрения продолжительности жизни тех, кто должен его поддерживать [включая вас самих]), то первое имеет вполне преимущество. Во-первых, он быстрее запускается, поскольку эквивалентный не-JQuery-код:
(На 25% быстрее с Chrome 7.0.517.5 в Windows XP. См. этот тест, который я создал на jsperf.com)

var e = document.getElementById("el");
// do stuff with e

против

document.getElementById("el").//manage the css
document.getElementById("el").//add, alter, or access attributes
document.getElementById("el").onclick // do something with this event.

Во-вторых, это гораздо более читабельно, как указал Глебм. Если вы используете описательные имена переменных - это ускоряет понимание и последующее редактирование.

Answer 3

Да. Более того, вы получаете лучшую читаемость (особенно если вы называете вещи такими, какие они есть):

var $commentForm = $('#comment-form');

Answer 4

По производительности, недостаточно, чтобы сказать.В удобочитаемости?Очень очевидное преимущество

Answer 5

Да, первый будет иметь лучшую производительность, поскольку jQuery должен только проанализировать селектор и создать набор узлов один раз. Конечно, разница может быть незаметной.