Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

298
Views
¿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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!