Firefox tab RAM usage increases over time when repeatedly changing an image's "src"
Hi, Not sure if this is the right place but here goes: Firefox keeps increasing it's tab RAM usage when I change the "src" property of an image programmatically for exten… (διαβάστε περισσότερα)
Hi, Not sure if this is the right place but here goes:
Firefox keeps increasing it's tab RAM usage when I change the "src" property of an image programmatically for extended periods of time (1 hour or so).
I created a dummy project here: https://github.com/mvandermade/example-base64-image-memory-high-native
The code above swaps out the image "src" 20 times a second. However I seen buildups with lower frequencies but bigger images too...
Here some measurement of tab RAM usage:
Measurements Windows 10: Firefox 131 00.00h 37MB 01.15h 127MB 03.00h 228MB
Edge (latest) 00.00h 28MB 01.15h 30MB 03.00h 33MB
(Edge seems to have no memory buildup as much)
Here is a copy of the code if the repo ever goes down:
<html>
<head>
<script>
function generateRandomBase64Image() {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions
canvas.width = 200;
canvas.height = 200;
if(ctx == null) return ""
// Fill the canvas with a random color
ctx.fillStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw some random shapes
for (let i = 0; i < 10; i++) {
ctx.fillStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
ctx.beginPath();
ctx.arc(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 50,
0,
Math.PI * 2
);
ctx.fill();
}
// Convert the canvas to a Base64 string
return canvas.toDataURL('image/png');
}
setInterval(() => {
document.getElementById("swapper").src=generateRandomBase64Image()
}, 50)
</script>
</head>
<body>
<img src="" id="swapper"/>
</body>
</html>
Just a observation from my side, if I can help improve things please let me know!
Greetings,
Martijn
p.s. I also created a project in React which gives similar results: https://github.com/mvandermade/example-base64-image-memory-high