Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

300
Vistas
¿Agregar demasiados detectores de eventos afecta el rendimiento?

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?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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

Los resultados

  1. Un <div> tiene 10 controladores de click y jQuery activa el evento de click .
    → 72.000 clics/seg
  2. Un <div> tiene 100 controladores de click y jQuery activa el evento de click .
    → 59.000 clics/seg ~ 19% más lento que el primer caso
    Esto muestra que los controladores de eventos adicionales pueden ralentizar la ejecución.
  3. Un <div> tiene 10 controladores de click , y el evento de click lo desencadena JS simple .
    → 84.000 clics/seg ~ 6% más rápido que el primer caso
    Usar JS simple es un poco más rápido que usar jQuery
  4. Un <div> tiene 100 controladores de click , y el evento de click lo desencadena JS simple .
    → 14.000 clics/seg ~ 77% más lento que el segundo caso
    Esto es interesante: cuando se usan eventos nativos, la cantidad de oyentes parece degradar el rendimiento más rápido que cuando se usa jQuery.

(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

¿Es lento?

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.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda