¿Hay algún impacto en el rendimiento en el uso de Live en lugar de vincular jQuery?

Question

Encontré algunas preguntas con respecto a live y bind, pero ninguna de ellas se refería al rendimiento. Creo que el título es bastante claro, así que ¿hay un impacto en el rendimiento al usar live en jQuery? Por qué estoy preguntando esto es porque tienes que hacer la búsqueda cada vez que se dispara el evento cuando usas live y mi idea es que esto podría afectar el rendimiento de una manera negativa. ¿O están jQuery haciendo cosas mágicas que aceleran esto, como escuchar algún tipo de evento que se dispara cuando se agrega algo al DOM?

Answer 1

En general, tiene un mejor rendimiento general para usar .live()/.delegate() cuando tiene muchos elementos (...) en su sitio que necesitan tener un controlador de eventos.

Es más costoso enlazar manejadores de eventos 50x a 50 nodos diferentes que solo vincular un manejador de eventos a un elemento primario común de estos 50 elementos (que básicamente es lo que .live() hace).

Ahora uno podría argumentar, "bueno, genial, pero esto viene con burbujas de eventos generales", lo cual es absolutamente correcto. Es por eso que se introdujo .delegate(). .live() siempre vincula un controlador al document.body que obviamente es el padre de cualquier nodo secundario en su marcado. .delegate(), sin embargo, toma un argumento, donde puede especificar el "mínimo común denominador", que significa el nodo principal más cercano que comparten los elementos que desea tener un controlador de eventos. Esto reduce la sobrecarga en realidad a cero.

Tengo que admitir que nunca comparé (todavía) en qué punto tiene sentido utilizar una "vinculación en vivo". Pero, una vez más, tiene sentido tan pronto como tenga más de un elemento para vincular manejadores. Solo el hecho de que solo haya UNA función en lugar de N me parece conveniente.

Answer 2

Mirándolo desde la perspectiva de la memoria, live tiene un mejor rendimiento. bind tiene que adjuntar el mismo evento a cada elemento en la selección de destino.

Desde una perspectiva de rendimiento real, el live tiene una sobrecarga pequeña con una verificación is, pero esto debería ser insignificante.

Este es un muy simplificado enfoque live -como:

function live(event, selector, callback) { 
    $(document).bind(event, function() { 
    if ($(this).is(selector)) { 
     return callback(); 
    } 
    }); 
} 

Answer 3

La forma .live obras es: evento está unido a uno de los nodos principales. Así que, en realidad, no hay búsqueda cada vez que se activa un evento, pero a costa de que este método sea menos compatible, pero IE. Le sugiero que se quede con .bind. Si tiene que vincular el evento a muchos elementos, utilice .delegate método.

docs

Answer 4

El jQuery explican exactamente cómo funciona:

método

Evento Delegación El .live() es capaz de afectar a los elementos que aún no se han añadido a la DOM a través del uso de la delegación de eventos: una el controlador vinculado a un elemento ancestro es responsable de los eventos que se desencadenan en sus descendientes. El controlador pasado a .live() nunca está vinculado a un elemento; en su lugar, .live() vincula un controlador especial a la raíz del árbol DOM.En nuestro ejemplo, cuando se hace clic en el elemento nuevo, se producen los pasos siguientes:

1. Se genera un evento de clic que se pasa al gestor.
2. Ningún controlador está directamente ligado a, por lo que el evento aparece en el árbol DOM.
3. El evento surge hasta que llega a la raíz del árbol, que es donde .live() vincula a sus controladores especiales de manera predeterminada.
   • A partir de jQuery 1.4, el burbujeo de eventos puede detenerse opcionalmente en un elemento DOM "context".
4. Se ejecuta el controlador de clic especial vinculado por .live().
5. Este controlador prueba el destino del objeto de evento para ver si debe continuar. Esta prueba se realiza al verificar si $ (event.target) .closest ('. Clickme') puede ubicar un elemento coincidente.
6. Si se encuentra un elemento coincidente, se llama al controlador original.

Como la prueba en el paso 5 no se realiza hasta que se produce el evento, los elementos se pueden agregar en cualquier momento y aún así responder a los eventos.

Así que, tipo de lo primero que dijiste. Verifica cuándo ocurre el evento.