Question

I have been working with Velocity.js and Vue.js and ran into a memory leak. Fiddle of the issue: You can see an example in this fiddle: http://jsfiddle.net/hRAn7/3/

$(function () {

    var ExtVue = Vue.extend({
        'template': '#template',
        'replace': true
    });

    var currVue;

    setInterval(function () {
        var nextVue = new ExtVue();
        nextVue.$appendTo($('body').get(0));

        $(nextVue.$el).velocity({
            'left': '0'
        }, 0, callback);

        function callback() {
            if (currVue)
                currVue.$destroy();
            currVue = nextVue;
        }

    }, 10);
});

I used Chrome's timeline function and noticed that the number of DOM nodes never decreases, even when I force a garbage collection. I started diving into the heap profiler but it is a bit over my head.

When I us .animate() instead of .velocity(), the DOM nodes seem to get GCed correctly.

$(nextVue.$el).animate({
    'left': '0'
}, 0, callback);

It also seems that removing Vue also fixes the problem. Example: http://jsfiddle.net/yV6Zr/1/.

What could be causing this memory leak?

Was it helpful?

Solution

Resolved on velocity.js GitHub page:

https://github.com/julianshapiro/velocity/issues/300

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top