I am getting a memory leak when updating Text class at high speed.
Here is my code:
var count = 0;
document.addEventListener( 'DOMContentLoaded', function() {
var stage = new createjs.Stage("canvas");
var func = function() {
var text = count % 2 == 1 ? "C" : "D"
for(var i = 1; i <= 26; i++) {
for(var j = 1; j <= 19; j++) {
var t = new createjs.Text(text, "24px sans-serif", "DarkRed");
var con_name = i.toString() + '_' + j.toString();
var con = stage.getChildByName(con_name);
if(con == null) {
con = new createjs.Container();
con.name = con_name;
}else{
con.removeAllChildren();
}
con.x = i * 24;
con.y = j * 24;
con.addChild(t);
stage.addChild(con);
var a = con.bitmapCache;
var bounds = con.getBounds();
var margin = 4;
if(con.cacheID == 0) {
con.cache(
bounds.x - margin,
bounds.y - margin,
bounds.width + margin * 2,
bounds.height + margin * 2
);
}else{
con.updateCache();
}
}
}
count++;
};
setInterval(func, 100);
createjs.Ticker.framerate = 15;
createjs.Ticker.addEventListener("tick", stage);
});
In actual use, the numbers are displayed on multiple Text objects, we want to achieve fast changes.
Imagine something that displays multiple clocks in milliseconds.
At this time, the Text class needs to change at high speed, Chrome’s memory usage will gradually increase.
In the above code, though, it is cached and used, if you lose the cache, you will get memory leaks as well.
Is there any way to update more characters faster without memory leaks?
Updating text without cache or updating characters with cache both of them cause memory leakage.