Vue JS 和 Velocity JS 的 Javascript 内存泄漏答案

【问题标题】：Javascript memory leak with Vue JS and Velocity JSVue JS 和 Velocity JS 的 Javascript 内存泄漏
【发布时间】：2014-09-20 04:02:57
【问题描述】：

我一直在使用 Velocity.js 和 Vue.js，但遇到了内存泄漏。问题的小提琴：你可以在这个小提琴中看到一个例子：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);
});

我使用了 Chrome 的时间线功能，发现 DOM 节点的数量从未减少，即使我强制进行垃圾回收也是如此。我开始深入研究堆分析器，但它有点过头了。

当我使用.animate() 而不是.velocity() 时，DOM 节点似乎得到了正确的 GC。

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

似乎删除 Vue 也可以解决问题。示例：http://jsfiddle.net/yV6Zr/1/。

什么可能导致这种内存泄漏？

【问题讨论】：

使用缩小的库很难调查内存泄漏的来源
我已经更新了小提琴以包含一个未缩小版本的速度。

标签： javascript jquery vue.js velocity.js

【解决方案1】：

在velocity.js GitHub 页面上解决：

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

【讨论】：