Consumo de memory del webkit mobile

Estamos trabajando en la aplicación HTML5 para dispositivos mobilees (Android + iOS). Pero el gran problema es el consumo de memory: la cantidad de memory utilizada aumenta muy rápido y la aplicación se vuelve lag.

¿Cuáles son las mejores prácticas, sugerencias, herramientas, soluciones, etc. para combatir las pérdidas de memory en aplicaciones HTML (JavaScript)?

PD Nos enfocamos únicamente en browseres Webkit

Ha habido algunos artículos realmente geniales sobre este tema recientemente. Hay algunas fonts de creación de objects realmente sorprendentes que realmente no atraen su atención a less que esté sintonizado. Normalmente, el problema no es el uso de la memory, en realidad son los ciclos de recolección de basura necesarios para recostackr la memory en la que la aplicación se está filtrando lentamente.

Este artículo es el mejor que he leído sobre el tema recientemente: http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

En cuanto a las herramientas para combatir / diagnosticar el problema, viene a la mente el Speedtracer de Google Chrome. Por supuesto, la sintonización para Chrome no garantiza la sintonización de todos los browseres, pero la mayoría de las cosas que resultan en la creación de objects en Chrome son comunes a la especificación JS, ya que son implementadas por todos los browseres.

Una cosa importante a tener en count es que el uso de RAM y el uso de video RAM no son lo mismo. Una de las mejores prácticas es determinar qué partes de su interfaz de usuario están siendo aceleradas por hardware y asegurarse de que sean pequeñas (es decir, encajar en la pantalla de una vez). Si tiene porciones de scroll de gran tamaño del hardware de la pantalla acelerado, obtendrá rasgaduras / mosaicos de GPU y desplazamiento lento. Puede detectar esto en parte con el simulador de iOS. Este artículo cubre brevemente la idea: http://devinsheaven.com/turn-your-iphone-wacky-and-make-your-iphone-application-better/

Por último, hay un montón de patrones de fuga de memory muy comunes en JavaScript que cada ingeniero encuentra de vez en cuando. IBM tiene una buena list de ellos. No puedo publicar más de dos enlaces porque soy un n00b, pero puedes search en google las "Fugas comunes de memory de JavaScript" y es probablemente el primer resultado.

Algunas otras herramientas de diagnóstico que las personas pueden encontrar útiles en Chrome son el Administrador de tareas, el Panel de línea de time y el Perfilador de montón.

Navegador – Chrome Canary (27.0.1447.3 canario)

  • Administrador de tareas: vaya a Herramientas -> Administrador de tareas // Haga clic con el button derecho en la pestaña de encabezados y select 'Memoria JavaScript'

  • Pestaña Línea de time: Herramientas -> Herramientas de desarrollo -> Línea de time // Haga clic en Grabar, realice alguna interacción, luego deje de grabar

  • Heap Profiler: Herramientas -> Herramientas de desarrollo -> Perfiles // Haga clic en 'Take Heap Snapshot'

  • Depuración remota

  • Deep Memory Profiler

Técnica de "3 instantáneas" // Presentación "Eliminación de memory leaks en Gmail"