Memory leakage occurs when updating many characters.
Version used:createjs.EaselJS.version=1.00 Browser version: Chrome131.0.6778.140
Memory leakage occurs when updating many characters.
The code to reproduce it is as follows
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
window.addEventListener("load", init);
var count = 0;
function init() {
var stage = new createjs.Stage("myCanvas");
var func = function() {
var text = count % 2 == 1 ? "A" : "B"
for(var i = 1; i <= 100; i++) {
for(var j = 1; j <= 100; 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;
stage.addChild(con);
}else{
con.removeAllChildren();
}
con.addChild(t);
con.x = i * 24;
con.y = j * 24;
if(con.cacheID == null || con.cacheID == 0) {
var bounds = con.getBounds();
var margin = 4;
con.cache(
bounds.x - margin,
bounds.y - margin,
bounds.width + margin * 2,
bounds.height + margin * 2
);
} else {
con.updateCache();
}
}
}
count++;
};
setInterval(func, 500);
createjs.Ticker.framerate = 15;
createjs.Ticker.addEventListener('tick', function() {
stage.update();
});
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
</body>
</html>
This problem can be resolved by making the following modifications
createjs.Ticker.addEventListener('tick', function() { createjs.Text._workingContext.reset(); stage.update(); });
This memory leak is not Javascript memory, commit memory rises.
This problem may be due to the fact that some CanvasRenderingContext2D objects that have been saved() are not being released by restore() or reset().
I believe this problem is a bug in the EaselJS program. Will EaselJS fix this bug?
Or is there another solution?
Source: CreateJS/EaselJS