Rendimiento de Javascript: ¿cómo comprobar qué está ralentizando la página?

Question

Tengo una página que es muy lenta, no en la carga, pero en términos de la capacidad de respuesta al escribir en los campos del formulario en la página.

No hay ajax en la página; esto no tiene nada que ver con el transporte de red.

¿Qué son buenas herramientas o estrategias para descubrir dónde están los cuellos de botella del código? No he encontrado nada en las herramientas de desarrollo de Chrome para decirme dónde están los cuellos de botella.

Answer 1

Me parece que tiene algún evento disparando en cada pulsación de tecla en su campo de entrada. cosas que puede hacer:

1. Si perfiles de Chrome no se ajusta a sus necesidades, intente FireBug o de IE9 perfilador que es bastante decente. En IE9 puedes ver cuánto tiempo de CPU se gastó en cada llamada de función.
2. Elimine temporalmente los manejadores de los campos, uno por uno, y observe cualquier cambio en el rendimiento.

¡Avísame cómo te va!

Answer 2

Webkit tiene una opción de 'perfil'. Abra las herramientas de desarrollador (ctrl + shift + i) y haga clic en 'Perfiles'. Desde allí, puede ver un botón de grabación (el círculo) en la parte inferior. Haz clic y usa tu página como lo harías normalmente. ¡Haga clic de nuevo para detener e inspeccionar sus cronogramas para sus llamadas a funciones!

alternativa, se puede funciones de referencia utilizando de forma individual:

console.time("Some label"); 
console.timeEnd("Some label"); 

Answer 3

usar firebug para estos fines. Incluye un profiler.

Answer 4

Para este propósito creé UX Profiler. Realiza un seguimiento y agrupa todos los eventos que suceden como resultado de alguna acción del usuario (clic, pulsación de tecla, etc.) y mide su rendimiento. Entonces es fácil ver dónde está el cuello de botella.