Снижение производительности для функции jQuery live ()

Question

Для определенных элементов при наведении на них курсора я хочу, чтобы элементы увеличивались, а затем уменьшались при наведении. Поэтому я просто использую $('.elementClass').hover(function() { enlarge(this); }, function() { shrink(this); });. Я поместил это в область $(function() { }); всех веб-страниц, так как многие веб-страницы содержат элементы такого типа.

Иногда мне нужно создавать новые динамические элементы, и они имеют эти элементы выше. Конечно, мне нужно снова вызвать для них указанную выше функцию наведения, потому что они не существовали вначале.

Что кажется наиболее удобным, так это просто иметь целую батарею $('.variousClasses').live('variousEvents', function() { }); вызовов на каждой веб-странице для всех возможных функций, подобных описанным выше.

Итак, вопрос в том, существует ли снижение производительности для вызова live() столько раз, даже для элементов, которые никогда не будут запускать те события или элементы, которые никогда не будут существовать? Важно ли, чтобы я был осторожен только с вызовами hover() или live('hover') (и другими событиями) только при необходимости?

Answer 1

Как общий ответ на ваш вопрос, вы должны попытаться минимизировать посторонние вызовы функций - возможно, даже больше в динамической ситуации с контентом.

В частности, live() является хорошим примером для использования в этом вопросе, потому что он влечет за собой некоторые (потенциально) существенные осложнения производительности. Когда вы вызываете live(), jQuery привязывает выбранное вами событие к объекту document. Это означает, что каждый раз, когда событие вызывается, оно всплывает от исходного элемента к объекту document. В зависимости от структуры вашего сайта (и в целом) это может быть дорогостоящим.

Гораздо лучшая альтернатива с delegate()

Лучше использовать функцию jQuery delegate(), особенно если у вас есть предопределенный родительский контейнерный элемент, внутри которого будут запускаться все ваши события. Когда вы используете delegate(), вы в основном используете ограниченную версию live(), так что событие распространяется только на указанный родительский элемент. В результате вы избегаете многих потенциально дорогостоящих пожаров событий на элементах, которые вам не нужны.

В вашем случае, поскольку вы работаете с динамически генерируемым контентом, вы должны либо использовать вышеупомянутые функции, либо настроить свой код таким образом, чтобы при вставке элемента в DOM он также связывал с ним обработчик событий. Первое, вероятно, проще, но второе может предложить незначительную (вероятно, неразличимую) лучшую производительность.