0
flowrouter를 사용하여 두 개의 템플릿이있는 간단한 유성 앱이 있습니다. 각 템플릿에는 하나의 HTML 캔버스 요소가 있으며이 템플릿 요소에는 fabricjs 캔버스가 할당되고 상자가 그려져 있습니다.여러 템플릿에 대한 유물, fabricjs 캔버스로 인해 메모리 누수가 발생합니다.
메모리 성능 프로필을 수행하는 동안 두 템플릿 사이를 탐색 할 때 템플릿간에 모든 탐색이 계속 증가하는 것을 볼 수 있습니다.
가비지 컬렉터가 캔버스 바스를 지우지는 않을 것으로 예상했지만 아닙니다. 문맥에서 그들을 지키는 무언가. 내가 여기에서 놓친 것을 볼 수 없다.
템플릿 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>
는 // 자바 스크립트
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)
})
덕분에 ...
업데이트 : 몇 시간 디버깅 후에는 DOM 관련이있는 것으로 나타납니다. 유성 템플릿은 DOM 요소를 제거하지만 패브릭은 여전히이를 참조 할 수 있습니다. GC는 그것을 메모리에 남겨 둡니다. 패브릭 캔버스를 지우려면 각 템플릿에 추가 기능을 추가했습니다.
Template.one.onDestroyed(function(){
rec = null;
canvas.clear();
canvas.dispose();
$(canvas.wrapperEl).remove()
})
여전히 메모리 누수가 계속됩니다.