jQuery rendimiento: $ ('# selector') vivir() vs unir manualmente (cuando se trabaja con las peticiones Ajax)

Question

Cuando se trabaja con contenido cargado de forma asíncrona ¿Hay alguna diferencia desde el punto de vista del rendimiento entre:.

// .live() 
$('#mybutton').live('click', function(e){ doSomething(); }); 

y manualmente bind() los eventos que necesitamos cada vez después de que el contenido se ha cargado:

// manual bind every time 
$.ajax({ 
    url: url, 
    success: function(data){ 
     mycontainer.html(data); // data contains #mybutton 
     $('#mybutton').click(function(e){ doSomething(); }); 
    } 
}); 

?

Answer 1

Hay diferentes costos, vamos a ver ellos:

$('#mybutton').live('click', function(e){ doSomething(); }); 

Hay 2 costes principales aquí:

• El selector #mybutton necesita para funcionar de inmediato sin ningún motivo (el resultado se tira , solo queríamos el selector de todos modos ... estamos vinculados al document). En este caso, es un #id selector, por lo que es un costo muy bajo ... en otros casos, no es barato y desperdicia mucho (por ejemplo, [attr=something]).
• Cada click que burbujea hasta document ahora se debe comparar con este selector, un costo de evaluación por clic, esto varía con la cantidad de clics que esperas.

---

Ahora vamos a ver el otro método:

$('#mybutton').click(function(e){ doSomething(); }); 

Hay 2 costes principales aquí también:

• Los #mybutton carreras selectores, pero sólo una vez por petición ajax . Sin embargo, no lo estamos desperdiciando, estamos usando los resultados.
• El manejador click está ligado a un elemento real, en lugar de document, por lo que hay un costo vinculante cada vez que se ejecuta, en lugar de una vez

Sin embargo, no hay ningún costo por clic y la llamada selector en sí mismo no se desperdicia ... por lo que es mejor en general, ya que está usando un ID, esto no es cierto en otros casos.

---

En su caso, ya que está tratando con un ID (y garantizado un solo elemento), esto es mucho más barato:

$('#mybutton').click(function(e){ doSomething(); }); 

En otros casos, en los que estés vinculante cientos de elementos, .live() es el claro ganador, aunque .delegate() sería incluso mejor.

Answer 2

Probablemente un poco, pero no me preocuparía. Para mí, el método .live() parece mucho más fácil de mantener, así que lo usaría. Mientras nada sea muy lento, no hay necesidad de preocuparse por el rendimiento en JavaScript.

Answer 3

Desde el aspecto de su función de éxito, ¿está adjuntando un evento porque ese elemento ahora está disponible en su html? ¿Es eso así?

Si ese es el caso, entonces si la función llamada mediante el clic es siempre la misma, entonces puede usar 'en vivo'. Live te permite vincular a eventos que aún no existen. Así que puede poner esto incluso antes de su documento. Preparado. Luego, cuando el ajax actualice su documento principal, ese evento siempre debería funcionar. No necesitará asignarlo cada vez.

Para que obtenga el beneficio de rendimiento de no tener que hacer nada cada vez que regrese de una llamada ajax, realice la configuración sin depender de document.ready y se garantiza que funcionará.

HTH.