Ionic Memory Leaks - In an Ionic App Using Angular

Memory LeaksIn an Ionic App Using Angular

(Go to https://goo.gl/oEzqjz and follow setup instructions)

https://goo.gl/oEzqjz

The Problem

Someone opens a bug saying the app you’re working on crashes...

… along with some other vague details of what they were doing at the time.

Do we have a memory leak?

“Yep, definitely a memory leak.”

Finding the memory leaks

Chrome Timeline

The “Ever More Intimidating” Profiles Tab

Record Heap Allocations

The #1 Trick Memory Leaks Don’t Want You to Know

The #2 Trick Which Isn’t Really a Trick...

Getting Your Hands Dirty

I found the best way to tracking down memory leaks to be a fairly manual process.

Detached DOM Nodes

Code Removal

Just keep removing code till your problem doesn’t exist anymore.

Now you know where the problem is.

No idea. You figure it out.

With a bit of brainpower I’m sure you’ll find out what’s wrong.

And Google, Google helps.

What’s Actually Leaking?

Notes

● Garbage collection doesn’t run right away in ionic apps when navigating to another page

● Angular re-creates a lot of information when going to new pages because of the way scopes work so comparing heap snapshot proves very painful

● Caching your pages can mean it’ll be harder to track down the issue as the scopes are detached rather than destroyed and put back on

Tip: Try turning off caching unless required (ex. google maps)

Some Final Words...

So the next time your app crashes, remember that finding the issue shouldn’t be scary.

Just time consuming.

Questions?

The Future of Finding Memory Leaks

Automatic Leak Detection Based on Regression Modeling

https://bugzilla.mozilla.org/show_bug.cgi?id=1243091

Tagging functions to sort by allocations from this point on







Mobile

Ionic Memory Leaks - In an Ionic App Using Angular