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

Avatar for Username

Αναζήτηση στην υποστήριξη

Προσοχή στις απάτες! Δεν θα σας ζητήσουμε ποτέ να καλέσετε ή να στείλετε μήνυμα σε κάποιον αριθμό τηλεφώνου ή να μοιραστείτε προσωπικά δεδομένα. Αναφέρετε τυχόν ύποπτη δραστηριότητα μέσω της επιλογής «Αναφορά παραβίασης».

Μάθετε περισσότερα
Αυτό το νήμα αρχειοθετήθηκε. Κάντε νέα ερώτηση αν χρειάζεστε βοήθεια.
Επιλύθηκε Αρχειοθετήθηκε

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

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]

Τροποποιήθηκε στις από τον/την 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