thread - performance chrome developer tools

La ejecución lenta de JavaScript en Chrome, el generador de perfiles produce "(programa)" (3)

Los ciclos de inactividad ("no hacer nada") también se mostrarán como "(programa)" (puede perfilar esta página SO durante unos segundos y obtener el 100% de (programa) ), por lo que esto no es un signo de algo malo en sí mismo.

La otra cosa es cuando realmente ves tu aplicación retrasada. Luego (el programa) será contribuido por el código de enlaces V8 (y el código del WebCore que invocan, que es esencialmente cualquier cosa: operaciones DOM / CSS, pintura, asignaciones de memoria y GC, y no). Si ese es el caso, puede grabar una línea de tiempo de su aplicación (cambie al panel Timeline en Herramientas de desarrollo y presione el botón Record en la barra de estado inferior, luego ejecute su aplicación por un tiempo). Verá muchos eventos internos con sus temporizaciones como barras horizontales. Verá reflujos, recálculos de estilo, temporizadores activados, eventos de GC y más (por cierto, las últimas versiones de Chromium tienen una escala de tiempo de utilización del perfilador de memoria mejorada, por lo que también podrá monitorear la memoria utilizada por ciertos factores internos).

Para diagnosticar problemas de memoria (múltiples asignaciones que conllevan múltiples ciclos de Full GC) puede usar el panel Profiles . Tome una instantánea del montón antes de que comience la parte intensiva de su código, y otra después de que este código se haya ejecutado durante algún tiempo. Luego compare las dos fotos en heap (el SELECT de la derecha en la parte inferior) para ver qué asignaciones han tenido lugar, junto con su impacto en la memoria.

¿Cómo puedo determinar cuáles son los problemas en mi aplicación javascript cuando el generador de perfiles coloca (programa) en la parte superior con un 80%? ¿Es mi lógica demasiado compleja para que se produzca el seguimiento del punto de acceso? ¿Es mi huella de memoria demasiado grande? ¿Cuál es generalmente la causa de esto?

Más información:

No hay elementos en el formulario guardar la etiqueta de un lienzo
No hay comunicaciones en espera (xhr)
http://i.imgur.com/j6mu1.png

Para comprobar si se está desacelerando debido a una opción de memoria, use: chrome://memory

También puede consultar chrome://profiler/ para posibles pistas de lo que está sucediendo.

Otra opción es publicar su código javascript aquí.

Vea este enlace: lo ayudará a comprender la salida del generador de perfiles de Firebug

Yo diría que deberías verificar qué métodos toman%. Puede minimizar los procedimientos no deseados de ellos. Vi en tu figura, dado que un método de draw consume alrededor del 14% que se ejecuta en segundo plano. Puede ser por eso que tu JS carga lentamente. Debes determinar qué está tomando el tiempo. Tanto FF como Chrome tienen una función que muestra el tráfico de la red. Echa un vistazo a yslow también, tienen un gran complemento para Firebug.

Sugeriría algunas herramientas de auditoría de Chome que pueden decirle mucho sobre por qué sucede esto, probablemente debería incluir más información sobre:

¿Cuánto tiempo tardó en conectarse al servidor?
¿Cuánto tiempo tomó la transferencia de contenido?
¿Cuántas otras cosas estás cargando en esa página simultáneamente?

De todos modos, incluso sin todo eso, aquí hay una lista de verificación para mejorar el rendimiento para usted:

asegúrese de que su javascript sea tratado y se sirva como contenido estático, por ejemplo, a través de nginx / apache / lo que sea directamente o cdn, sin golpear el marco de su aplicación
investigue si puede usar CDN para servir javascript, a veces incluso apuntar diferentes nombres de dominio a su servidor tiene un impacto positivo, por ejemplo, en lugar de http://example.com/blah.js -> http://cdn2.example.com/blah.js
asegúrese de que su js tenga encabezados de caducidad adecuados, no vuelva a descargarlo cada vez que el cliente actualice una página
activar gzipping de contenido js
minimice su js utilizando diferentes herramientas disponibles (por ejemplo, con el compilador de cierre de Google)
Combina tus scripts (reduce el número de solicitudes)
ponga sus etiquetas de script justo antes
Investigue y limpie / optimice sus enlaces onload y document.ready

Eche un vistazo al yslow y a Google PageSpeed , ambos muy útiles para mejorar el rendimiento.