We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

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

more options

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]

Modifié le par cor-el

Solution choisie

Toutes les réponses (2)

more options

Solution choisie

Maybe file a bug report on Bugzilla.

Cela vous a-t-il été utile ?

more options

Thanks, I will do that!

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

Modifié le par martijn.vandermade

Cela vous a-t-il été utile ?

Poser une question

Vous devez vous identifier avec votre compte pour répondre aux messages. Veuillez poser une nouvelle question, si vous n’avez pas encore de compte.