Meteor，fabricjs画布在多个模板上导致内存泄漏
Meteor，fabricjs画布在多个模板上导致内存泄漏
提问于 2017-10-30 23:12:31
我有一个简单的流星应用程序与两个模板使用flowrouter在它们之间导航。每个模板都有一个单独的HTML canvas元素，都有一个指定的fabricjs canvas和一个绘制的方框。
当我在两个模板之间导航，同时进行内存性能分析时，我发现每次在模板之间导航时，内存都会不断增加。
我期望垃圾收集器清理画布变量，但事实并非如此。所以有一些东西让他们保持在上下文中。我看不出我错过了什么。
模板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)
})谢谢..。
更新:经过几个小时的调试，它似乎与DOM相关。meteor模板删除了DOM元素，但fabric可能仍在引用它。GC会将其留在内存中。我为每个模板添加了一个额外的函数来尝试清除fabric画布。
Template.one.onDestroyed( function(){
rec = null;
canvas.clear();
canvas.dispose();
$(canvas.wrapperEl).remove()
})但仍然看到内存泄漏仍在继续。
回答 1
Stack Overflow用户
发布于 2017-11-01 16:40:10
问题已解决。
我将var canvas定义从函数块移到了文件的根目录，在meteor中，这使得它在文件的作用域中是全局的，而不是真正的应用程序全局。fabric‘s canvas clear() dispose()来自fabric的一位作者的推荐，作为对其他人问题的回答。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47018635
复制相关文章
相似问题
腾讯云开发者
