Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

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 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]

由 cor-el 於 修改

被選擇的解決方法

所有回覆 (2)

選擇的解決方法

Maybe file a bug report on Bugzilla.

Thanks, I will do that!

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

由 martijn.vandermade 於 修改