2011-05-18 11 views
5

Tengo una cuadrícula y hay una columna que contiene <a> etiqueta de ancla con algo de información adicional en la etiqueta <data-..> y tiene un nombre de clase <class='myspeciallink'>. Y en mi discreta secuencia de comandos JS, selecciono todos los elementos con ese nombre de clase y aplico live('click'). Necesito que sea live() porque la grilla se genera en el tiempo de ejecución.en vivo ('clic') y rendimiento

¿Qué sucede dentro del controlador live('click')? Utilizo esos datos adicionales y agrego un <div> a la página según esos datos. Que a su vez solía generar el diálogo jQuery UI. Funciona muy bien en mi computadora.

¡Pero! ¿Cómo podría funcionar eso en el mundo real? ¿Debería preocuparme por posibles implicaciones de rendimiento? Siento que la aplicación de live() en más de una docena de elementos instantáneamente
afectaría el rendimiento. Especialmente con un gestor bastante complicado como el mío: necesita obtener los datos, analizar los datos, crear un div, aplicar un cuadro de diálogo, etc.

¿Eso huele como un mal diseño? ¿Podría sugerir un enfoque diferente o mis preocupaciones son infundadas? ¿Puedo utilizar algún tipo de herramienta de creación de perfiles para encontrar los cuellos de botella en mi javascript?

UPD: Todavía nadie sugirió ninguna herramienta de creación de perfiles. Las herramientas Firebug y Chrome Dev son buenas, pero tal vez hay algo aún mejor.

+1

que no es necesario que para ser '.live()'. Necesitas que sea '.delegate()'. –

+0

Tiene razón, no necesito que se propague la propagación. – Agzam

+0

Pero en mi caso solo puedo hacer '$ ("cuerpo"). Delegar (". Myspeciallink", "clic"' ... Porque este tipo de enlaces pueden colocarse en cualquier lugar de la página – Agzam

Respuesta

4

live("click")live("click") es mejor desde el punto de vista del rendimiento: en lugar de vincular un controlador de eventos a cada elemento coincidente, está aplicando un solo controlador de eventos que espera que los eventos se disparen y luego ve si el elemento que se activó el evento coincide con el selector .live fue llamado.

Comparar esto con $('selector').click(...) que hace recorrer cada elemento y vincular un nuevo controlador de eventos. live('click') no tiene una sobrecarga adicional, independientemente de cuántos elementos de página coinciden con su selector. Dependiendo de cuántos elementos coincida su selector, usando .live puede evitar un retraso de hasta unos pocos segundos durante la carga inicial de cada página.

Sin embargo, el controlador de eventos debe verificar cada evento que surge contra su selector, para ver si hay una coincidencia. Esto agregará una pequeña cantidad de sobrecarga a cada evento de clic, pero es muy probable que los usuarios no noten la diferencia.

+0

Bueno, no necesariamente, si el controlador' click' detiene la propagación, entonces yo guarde el burbujeo en cada clic, lo cual no ocurre con 'live'. Esto hace que 'click' sea mejor * cada * clic, mientras que su ventaja es verdadera solo para el enlace, que es una vez off. Y el enlace es un micro -micro-optimización (como es el burbujeo, aunque supongo). – davin

+0

@davin Puede ser un ahorro masivo, dependiendo de qué tan grande es la grilla de elementos del OP. – meagar

+1

masivo? Suena como una exageración, acabo de armar un documento de 1000 etiquetas y manejadores de clics enlazados a todos ellos. Más de 10 ejecuciones en una computadora portátil promedio en Chrome, el tiempo que se tarda en enlazar a las 1000 de ellas es de 4 ms.No es mucho más rápido que eso, y si eso es una ejecución única, apenas estás optimizando nada. – davin

Cuestiones relacionadas