Windows 10 reached EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Firefox tab RAM usage increases over time when repeatedly changing an image's "src"

martijn.vandermade
martijn.vandermade

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

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 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: <pre><nowiki><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> </nowiki></pre><br> 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 https://github.com/mvandermade/example-base64-image-memory-high]

Modified by cor-el

Chosen solution

Maybe file a bug report on Bugzilla.

Read this answer in context 👍 1

All Replies (2)

cor-el
cor-el
  • Moderator

Chosen Solution

Maybe file a bug report on Bugzilla.

martijn.vandermade
martijn.vandermade Question owner

Thanks, I will do that!

I added my observations here: https://bugzilla.mozilla.org/show_bug.cgi?id=1807826

Modified by martijn.vandermade