Javascript-Speicherverlust bei Vue JS und Velocity JS
-
20-12-2019 - |
Frage
Ich habe mit Velocity.js und Vue.js gearbeitet und bin auf einen Speicherverlust gestoßen.Geige zum Thema:Ein Beispiel können Sie in dieser Geige sehen: 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);
});
Ich habe die Timeline-Funktion von Chrome verwendet und festgestellt, dass die Anzahl der DOM-Knoten nie abnimmt, selbst wenn ich eine Garbage Collection erzwinge.Ich habe angefangen, in den Heap-Profiler einzutauchen, aber er übersteigt meinen Kopf etwas.
Wenn ich uns .animate()
anstatt .velocity()
, die DOM-Knoten scheinen korrekt GCed zu werden.
$(nextVue.$el).animate({
'left': '0'
}, 0, callback);
Es scheint auch, dass das Entfernen von Vue das Problem ebenfalls behebt.Beispiel: http://jsfiddle.net/yV6Zr/1/.
Was könnte diesen Speicherverlust verursachen?
Lösung
Auf der GitHub-Seite „velocity.js“ behoben: