Mozilla Relay is experiencing issues with call and text delivery. We’re working on a fix. Check Mozilla Status for updates.

Avatar for Username

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

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

martijn.vandermade
martijn.vandermade
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]

Geändert am von cor-el

Ausgewählte Lösung

Maybe file a bug report on Bugzilla.

Diese Antwort im Kontext lesen 👍 1

Alle Antworten (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Ausgewählte Lösung

Maybe file a bug report on Bugzilla.

Hilfreich?

martijn.vandermade
martijn.vandermade Fragesteller
more options

Thanks, I will do that!

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

Geändert am von martijn.vandermade

Hilfreich?

Stellen Sie eine Frage

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.