Meteor, Fabricjs Canvas auf mehreren Vorlagen verursacht Speicherverlust

Question

Ich habe eine einfache Meteor App mit zwei Vorlagen mit Flowrouter, um zwischen ihnen zu navigieren. Jede Vorlage hat ein einzelnes HTML-Canvas-Element, in dem sowohl eine Fabricjs-Leinwand als auch eine Box gezeichnet ist.

Wenn ich beim Erstellen eines Speicherleistungsprofils zwischen den beiden Vorlagen navigiere, sehe ich, dass der Speicher bei jeder Navigation zwischen Vorlagen kontinuierlich zunimmt.

Ich erwartete, dass der Garbage Collector die Leinwand Vars aufräumen, aber es ist nicht. Also etwas, das sie im Kontext hält. Ich kann nicht sehen, was ich hier vermisse.

Vorlage HTML

<template name="one"> 
     Template One 
     <a href="/two"> two</a> 
     <div> 
       <canvas id="canvasONE" width="2000" height="1601"></canvas> 
     </div> 
</template> 

<template name="two"> 
    Template Two 
    <a href="/one"> one</a> 
    <div> 
     <canvas id="canvasTWO" width="2000" height="1601"></canvas> 
    </div> 
</template> 

// JavaScript

import { Template } from 'meteor/templating'; 
import { ReactiveVar } from 'meteor/reactive-var'; 


import './main.html'; 
////////////////////////////////////////////// 
// Template One 


Template.one.onRendered(function(){ 
    var canvas = new fabric.Canvas('canvasONE',{selection:true}); 

    var rec = new fabric.Rect({ 
    left: 0, 
    top: 0, 
    width: 120, 
    height: 50, 
    rx: 4, 
    ry: 4, 
    fill: '#64b5f6', 
    stroke: '#6Ebfff', 
    strokeWidth: 2, 
    originX: 'left', 
    originY: 'top', 
    lockScalingX: true, 
    lockScalingY: true 

}); 

canvas.add(rec) 

}) 


///////////////////////////////////////////////////// 
// Template Two 

Template.two.onRendered(function(){ 
    var canvas = new fabric.Canvas('canvasTWO',{selection:true}); 

    var rec = new fabric.Rect({ 
     left: 0, 
     top: 0, 
     width: 120, 
     height: 50, 
     rx: 4, 
     ry: 4, 
     fill: '#223344', 
     stroke: '#6Ebfff', 
     strokeWidth: 2, 
     originX: 'left', 
     originY: 'top', 
     lockScalingX: true, 
     lockScalingY: true 

     }); 

     canvas.add(rec) 
    }) 

Dank ...

UPDATE: Nach einigen Stunden Debugging scheint es DOM verwandt zu sein. Die Meteorschablone entfernt die DOM-Elemente, aber Fabric könnte immer noch darauf verweisen. Der GC lässt es im Gedächtnis. Ich habe zu jeder Vorlage eine zusätzliche Funktion hinzugefügt, um das Fabric-Canvas zu löschen.

Template.one.onDestroyed(function(){ 
    rec = null; 
    canvas.clear(); 
    canvas.dispose(); 
    $(canvas.wrapperEl).remove() 
}) 

aber immer noch das Speicherleck weiter.

Answer 1

Das Problem wurde behoben.

Ich habe die Var-Canvas-Definition außerhalb der Funktionsblöcke in den Stamm der Datei verschoben, In meteor macht dies global zum Umfang der Datei, nicht eine wahre Anwendung global. Das fabricjs-Zeichen clear() dispose() stammte von einer Empfehlung eines der Autoren von Fabric, die als Antwort auf die Frage einer anderen Person gepostet wurde: