Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

299
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda