Tengo una pregunta general sobre eventos/oyentes de javascript (jQuery). ¿Hay algún límite para la cantidad de clics que escuchan sin tener problemas de rendimiento?
En términos de rendimiento, la cantidad de elementos a los que está vinculado el evento es donde vería algún problema.
Aquí hay una prueba de jsperf . Verá que vincular muchos elementos es mucho más lento, aunque solo se vincula un evento en cada caso.
La tercera prueba en jsperf muestra cómo vincularía el evento a un elemento principal y usaría la delegación para escuchar los elementos que desea. (En este caso .many )
nb La prueba muestra que la tercera opción es la más rápida, pero eso se debe a que apunta al elemento con una id y no con una clase.
Actualización: aquí hay otra prueba de rendimiento que muestra 3 eventos vinculados a una id frente a un evento vinculado usando una class
Aunque esta es una vieja pregunta, no creo que esté completamente respondida todavía.
Como señaló atmd : ya es importante dónde está agregando los controladores de eventos. Pero la pregunta original parece estar más preocupada por el impacto en el rendimiento de activar esos controladores de eventos (por ejemplo, eventos de clic o desplazamiento).
Y sí, agregar controladores de eventos adicionales a un elemento SÍ reduce el rendimiento. Aquí hay una comparación de rendimiento para probar los siguientes casos:
https://jsbench.me/ztknuth40j/1
<div> tiene 10 controladores de click y jQuery activa el evento de click .<div> tiene 100 controladores de click y jQuery activa el evento de click .<div> tiene 10 controladores de click , y el evento de click lo desencadena JS simple .<div> tiene 100 controladores de click , y el evento de click lo desencadena JS simple .(Esos resultados varían en cada ejecución y dependen en gran medida de su hardware y navegador)
Tenga en cuenta que esas pruebas se realizan con una función vacía. Al agregar una función real que realiza algunas tareas adicionales, el rendimiento se ralentizará aún más.
Aquí hay una segunda prueba que cambia el contenido de un div en cada clic:
https://jsbench.me/ztknuth40j/2
Por otro lado: incluso 100 operaciones por segundo son súper rápidas ( es decir, cada controlador de eventos se ejecuta 100 veces en un solo segundo ) y ningún usuario notará la demora.
Creo que no tendrá problemas con los eventos de acción del usuario, como los controladores de click o mouseenter , pero debe tener cuidado al usar eventos que se activan rápidamente, como scroll o mouseover .
Además, a medida que las computadoras se vuelven más rápidas y los navegadores aplican más y más optimizaciones, no existe un límite estricto para la cantidad de controladores de eventos que son "demasiados". No solo depende de la función que se llama y el evento que se observa, sino también del dispositivo y navegador del usuario.