2012-02-29 11 views
17

¿Cómo voy a determinar cuáles son los bloqueos en mi aplicación de JavaScript cuando el generador de perfiles coloca (programa) en la parte superior con un 80%? ¿Mi lógica es demasiado compleja para que ocurra el seguimiento del punto de acceso? ¿Mi huella de memoria es demasiado grande? ¿Cuál es generalmente la causa de esto?Ejecución lenta de javascript en Chrome, profiler produce "(programa)"

Más información:

+1

Es posible que desee comprobar su javascript para cualquier bucle. Por lo general, cuando tienes ese tipo de uso es de algo que se ejecuta tan rápido como puede en un bucle. – Developer

+1

Puede considerar cargar una captura de pantalla de generador de perfiles. – c69

+0

Puede intentar depurar el navegador en sí ... http://www.mail-archive.com/[email protected]/msg06911.html Pero sospecho que sus puntos calientes están en DOM/Rendering/other (fileacces ? xhr?) código, y no en JS. – c69

Respuesta

25

Los ciclos inactivos ("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)), así que esto no es un signo de algo malo en sí mismo.

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

Para diagnosticar problemas de memoria (asignaciones múltiples que implican múltiples ciclos completos de GC) puede usar el panel Profiles. Tome una instantánea de 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 un tiempo. Luego, compare los dos diagramas (el SELECTO correcto en la parte inferior) para ver qué asignaciones han tenido lugar, junto con su impacto de memoria.

+1

Una actualización: el ** (programa) ** ya no incluye el tiempo de inactividad. Eso ahora se informa por separado como ** (inactivo) **. – thinkh

3

Para comprobar si se está volviendo lento debido a una opción de uso de memoria: chrome://memory

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

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

3

ver este enlace: que le ayudará en Understanding Firebug profiler output

yo diría que usted debe comprobar qué métodos teniendo%. Puede minimizar los procedimientos no deseados de ellos. Vi en su figura dado que el método draw consumía alrededor del 14% que se ejecuta en segundo plano. Puede ser debido a que su JS se carga lentamente. Debes determinar lo que lleva tiempo. Tanto FF como Chrome tienen una función que muestra el tráfico de la red. Eche un vistazo a yslow también, tienen un gran complemento para Firebug.

Yo sugeriría algunas herramientas de auditoría de Chome que se puede decir mucho acerca de por qué sucede esto, probablemente debería incluir más información sobre: ​​

  1. cuánto tiempo se tarda en conectar con el servidor?
  2. ¿cuánto tiempo llevó transferir el contenido?
  3. ¿cuánto más está cargando en esa página al mismo tiempo?

todos modos, incluso sin todo eso, aquí está una lista de comprobación para mejorar el rendimiento para usted:

  • asegúrese de que su Javascript se trata y se han publicado contenido estático como, por ejemplo, vía nginx/apache/lo que sea directamente o cdn, sin golpear su marco de aplicación
  • investigue si puede utilizar CDN para servir javascript, a veces incluso señalar diferentes nombres de dominio a su servidor tiene un impacto positivo, p. en lugar de http://example.com/blah.js ->http://cdn2.example.com/blah.js
  • asegurarse de que sus js se sirve con encabezados de caducidad adecuados, no volver a descargar cada vez que el cliente actualiza una página
  • su vez en gzipping del contenido js
  • minify sus js utilizando diferentes herramientas disponibles (por ejemplo, con Google compilador de cierre)
  • combinan las secuencias de comandos (reduce el número de solicitudes)
  • coloque las etiquetas de script justo antes
  • investigar y limpiar/optimizar el proceso de carga y ganchos document.ready

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

Cuestiones relacionadas