Mobile webkit memory consumption

Question

We are working on HTML5 application for mobile devices(Android + iOS). But the great problem is memory consumption - used memory amount is rising very fast and app become laggy.

What are the best practices, hints, tools, solutions, etc. for fighting with memory leaks in HTML(JavaScript) applications ?

P.S. We are targeting only on Webkit browsers

Answer 1

There have been some really great articles on this subject recently. There are some really surprising sources of object creation that don't really catch your attention unless you're tuned for it. Typically, the problem isn't the memory use, it's actually the garbage collection cycles required to collect the memory the app is slowly leaking.

This article is the best I've read on the topic recently: http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

As far as tools to combat/diagnose the issue, Google Chrome's Speedtracer comes to mind. Of course, tuning for Chrome doesn't guarantee tuning for all browsers, but most of the things that result in object creation in Chrome are common to the JS spec as it's implemented by all the browsers.

One important thing to consider is that RAM use and video RAM use are not the same. One best practice is to determine which portions of your UI are being hardware accelerated and to make sure they're small (i.e. fit on screen all at once). If you have huge scrolling portions of the screen hardware accelerated, you will get GPU tearing/tiling and laggy scrolling. You can detect this in part using the iOS simulator. This article covers the idea briefly: http://devinsheaven.com/turn-your-iphone-wacky-and-make-your-iphone-application-better/

Lastly, there are a bunch of really common memory leaky patterns in JavaScript that every engineer runs into from time to time. IBM has a good list of them. I can't post more than two links because I'm a n00b, but you can google for "Common JavaScript Memory Leaks" and it's probably the first result.

Answer 2

Some other diagnostic tools people might find useful within Chrome are the Task manager, the Timeline Panel, and the Heap Profiler.

Browser - Chrome Canary (27.0.1447.3 canary)

• Task Manager: Go to Tools--> Task Manager //Right-click the headings tab and check 'JavaScript Memory'

• Timeline tab: Tools-->Developer Tools-->Timeline //Click Record, do some interaction, then stop record

• Heap Profiler: Tools-->Developer Tools-->Profiles //Click the 'Take Heap Snapshot'

• Remote debugging

• Deep Memory Profiler

"3 snapshot" technique //Presentation "Eliminating memory leaks in Gmail"

• https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&loop=false&delayms=3000#slide=id.g1d65bdf6_0_0