0

I have a div element with multiple background-image but in different positions [0..n].

The images format is png but animated (apng).

At the start, every position has no pictures in there (backgroundImage: none, none, ..., none). However, everytime i update this property with an animated sprite at a certain position, the cache keeps all the previous images referenced in the property and the memory keeps increasing.

function test() {
  let charImg = ''
  for (let i=0; i<g.characterList.image.length; i++) {
    if (charImg !== '') charImg += ', '
    let param = '#date=' + new Date().getTime()
    charImg += 'url("./sprite.png' + param + '")'
  }

  const character = document.getElementById('character')
  character.style.backgroundImage = charImg
}

In this example i call test() with a simple onclick event. Every call makes the memory increases without being cleared by the garbage collector.

I even tried to remove the div element from dom and create a new one with the new background-image property with the same result.

I even added the following into my html :

<meta http-equiv='cache-control' content='no-cache, no-store, max-age=0, must-revalidate'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

For information, i need the parameter into the url so the sprite reloads everytime i set the background-image property.

Is there a solution or an alternative to this hellish problem? Thanks in advance.

Memory at the start of the app

Memory after calling test many times

Antony F
  • 55
  • 1
  • 4
  • how you catch that this is a memory leak? means just because of this (on each new image load) memory increases is not a leak, when system need memory it will flush unused images from the memory. Does you also feel any other difference in your app like it become slow or something else – mastermind Jan 07 '20 at 12:16
  • @mastermind Well, for me the image "sprite.png" is 10.0Kb size. The fact that i add a parameter to the url makes the sprite loaded again completely but the previous sprite used into the background-image property stays in memory and isn't free by the GC. So, what i believe is unatural is that everything stays in memory : Memory expected : only "sprite.png#date=_dateN_" needed Actual result : "sprite.png#date=_date1_", "sprite.png#date=_date2_", ...,"sprite.png#date=_dateN_" ("sprite.png#date=_date1_" to "sprite.png#date=_dateN-1_" not needed). Am i wrong to think this way? – Antony F Jan 07 '20 at 12:39
  • @mastermind Sorry, in fact when the application is idle and minimized, the cache is cleared! But yeah, i have to minimize the window and waits a few seconds for it happens. So i guess it isn't a memory leak by itself. However, i believe i have still a memory leak into my entire code somewhere because of "My Project" memory increasing (reached more than 30mo with a long use) and not being cleared even if minimized. I removed most of the global variables in my main js file by putting them into a variable `g`. The file includes multiple other js files that are modules. Any ideas? – Antony F Jan 07 '20 at 13:26
  • @mastermind Furthermore, i still have no idea what's the difference between those 5 process for a single application. Perhaps it can help me to understand better the cause? – Antony F Jan 07 '20 at 13:28

1 Answers1

0

Its not a leak :)

how you catch that this is a memory leak? means just because of this (on each new image load) memory increases is not a leak, when system need memory it will flush unused images from the memory. Does you also feel any other difference in your app like it become slow or something else.

5 process for a single application

as per my knowledge electron app starts Chromium which some processes and Node.JS server have some processes.

in my Experience even after close the Electron App its not removed from background. 

electron.app.once('window-all-closed', electron.app.quit);
electron.app.once('before-quit', () => {
    window.removeAllListeners('close');
});

electron and node on windows, kill a spawned process

mastermind
  • 1,057
  • 1
  • 8
  • 15