Javascript (jQuery) medición del rendimiento y mejores prácticas (no tiempo de carga)

Question

Diré de entrada que esta pregunta NO es sobre los tiempos de carga; Conozco a YSlow, el generador de perfiles de Firebug y las mejores prácticas y herramientas que Googlage revela sobre los tiempos de carga de componentes de la página.

Pregunto qué buenas herramientas de creación de perfiles o bibliotecas o complementos hay para medir la ejecución real de Javascript (específicamente jQuery), en la medida en que mejora la experiencia real del usuario. Por ejemplo, medir el tiempo desde el clic hasta el resultado visible en pantalla, o ayudar a determinar por qué un efecto de desplazamiento basado en jQuery tiene una respuesta lenta.

Estamos notando que cuando la página/DOM crece relativamente grande (digamos, 70kb a 150kb vale HTML, excluyendo CSS, JS e imágenes externas), y/o tiene una anidación muy profunda (14-25 niveles desde <cuerpo> a la etiqueta más profunda), los eventos jQuery se disparan más lentamente, o toda la experiencia del usuario JS se vuelve lenta.

También busqué en Google y aprendí sobre las mejores prácticas para los selectores (por ejemplo, seleccionar por id es mucho más rápido que seleccionar con clases), implementaré estas prácticas. Sin embargo, una vez que jQuery esté completamente cargado y todos los eventos enganchados, aún necesitamos mejorar la activación y ejecución del evento real.

Ya he implementado alguna delegación de eventos, y tengo la sensación de que tener menos elementos ganchos en el DOM mejora un poco las cosas, pero la experiencia general aún necesita mejorarse con páginas grandes. Debo mencionar que, dado que el sitio es AJAX pesado (los lotes se cargan a través de AJAX en oposición al hit HTTP inicial), estamos haciendo un uso intensivo de livequery en lugar de los ganchos de jQuery de eventos simples. También debo mencionar que estamos un poco más centrados en el rendimiento de IE (7+), pero también requerimos un buen rendimiento de Firefox.

A medida que desarrollo y hago cambios, creo que necesito una forma de medir las velocidades antes y después del cambio, así puedo tener números concretos sobre si un cambio mejora algo o no.

¿Algún consejo, herramientas, libs, entradas de blog, URLs?

Answer 1

JSLitmus parece algo que podría probar.

Answer 2

Al usar Firebug puede ir a la pestaña de la consola, luego hacer clic en el ícono de Firebug en la esquina superior izquierda (llamado "Opciones de Firebug"). A continuación, haga clic en la opción "Perfil Javascript", después haga lo que quiera medir, por ejemplo, haga clic en un botón de JavaScript, arrastrando un objeto dragable Jquery o lo que quiera que ejecute un poco de código JavaScript. Cuando haya ejecutado el javascript que desea medir, vuelva a la misma opción de menú y, una vez más, haga clic en "Perfil javascript" (para que se desactive). Ahora, la pestaña de la consola se completará con todas las acciones que ejecutó anteriormente, así como el tiempo que llevó ejecutar cada método, etc. (y el tiempo total también).