I'm using Backbonejs
and Requirejs
for creating a single page web app.
It seems like my app has memory leaks
.
For testing I've created a sample code. It creates a view object, call its render
function and attach the returned html
into the DOM
.
The returned html
has a button
. After clicking the button, its callback
calls destroy
function where the view is destroyed.
However, when I run chrome heap profilier
, I can see detached DOM tree
still hanging around. Looking deep into it, one can see references
kept by jQuery
.
I have doubt whether this is memory leakage or not.
If yes mycode is not keeping any references.
So does the problem lies in jQuery
?
Here's is link to sample code.
I've also attached screen shots of heap snapshots.
The Memory Profiler is a component in the Android Profiler that helps you identify memory leaks and memory churn that can lead to stutter, freezes, and even app crashes. It shows a realtime graph of your app's memory use and lets you capture a heap dump, force garbage collections, and track memory allocations.
A memory leak reduces the performance of the computer by reducing the amount of available memory. Eventually, in the worst case, too much of the available memory may become allocated and all or part of the system or device stops working correctly, the application fails, or the system slows down vastly due to thrashing.
Memory leaks occur when an application allocates memory for an object, but then fails to release the memory when the object is no longer being used. Over time, leaked memory accumulates and results in poor app performance and even crashes.
Applications built using backbone often have memory leaks caused by orphaned views. I deal with this by using marionette which manages my views for me. Using backbone directly isn't a typical approach, as it's really a toolkit upon which frameworks are developed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With