Creación de perfiles de aplicaciones jQuery

Question

Recientemente me encontré con un error de script de respuesta lenta en una aplicación y sentí la necesidad de crear un perfil de la aplicación para identificar lo que necesito mejorar. Quiero una solución a largo plazo, no una solución hackish. Probé el Firebug Profiler pero como la aplicación usa mucho jQuery recibo muchos informes sobre llamadas anónimas que realmente esperaba.

También he encontrado algunos informes en la web sobre un generador de perfiles creado por John Resig, pero los enlaces que encontré estaban todos muertos.

Así que mis preguntas son:

1. ¿Cuáles son las mejores maneras para perfilar una aplicación de jQuery?
2. ¿Existen herramientas/scripts dedicados de código abierto para lograr esto?

Answer 1

Así que después de excavar un poco más he encontrado otra solución dada por John Resig. Él estaba usando una extensión de prueba de unidad para firebug llamada FireUnit (http://fireunit.org/) que resulta bastante agradable.

Si se echa un vistazo a los ejemplos dados en:

http://ejohn.org/blog/function-call-profiling/

y también comprobar la página de prueba que está proporcionando:

http://ejohn.org/files/jquery-profile.html

Qué obtienes algunos buenos resultados como el siguiente:

.addClass ("prueba"); 52
.addClass ("prueba"); 102
.removeClass ("prueba"); 102
.removeClass ("prueba"); 52
.css ("color", "rojo"); 299 O (3n)
.css ({color: "rojo", borde: "1px sólido rojo"}); 597 O (6n)
.remove(); 198 O (2n)
.append ("prueba"); 599 O (6n)
.show(); 982 O (10n)
.hide(); 968 O (10n)
.html ("prueba"); 104
.empty(); 100
.is ("div"); 109
.filter ("div"); 214 O (2n)
.find ("div"); 300 O (3n)

He logrado integrar esto en varias aplicaciones y los resultados han sido más que satisfactorios. El único inconveniente es que solo puedes utilizar el complemento desde Firefox. Pero aún así esta es una buena herramienta.

Answer 2

Como se dijo here:

IE, Chrome y Safari han construido en los perfiladores en el desarrollo web herramientas que se incluyen con el navegador. Para Firefox puedes usar Firebug. También es útil, ya que está utilizando jQuery, lo que significa que su informe de perfiles se completará con funciones anónimas y por igual, haciéndolo ilegible, John Resig's jQuery profiling plugin, que dará un resultado más claro al respecto.

Answer 3

he creado una herramienta que hace bastante exactamente lo que necesita: http://yellowlab.tools

lanzamiento de una prueba, haga clic en la pestaña "JS línea de tiempo" y se registra cada funciones de jQuery que acceden a la DOM durante la carga de la página. También rastrea las funciones JS de vanilla, para que puedas entender la magia detrás de jQuery.

Muy útil para ayudar a optimizar el código jQuery para el rendimiento.

espero que mi respuesta no llega demasiado tarde :)