Is there a cache to clear that I'm missing?

[kenray]

This is sort of a cross-post from the Phaser forum, but I am trying to determine how to regain memory used when going from one screen (state) to another. I have a test app at http://www.interactplayer.com/memorytest/index.html that cycles through five 1024 x 1024 images interspersed with blank screens. When going from an image "page" to the blank page, I'm attempting to fully clear any and all caches and reduce my memory back to what it started with (or really close to it):

PIXI.Texture.removeTextureFromCache(pageShown).destroy(true);

to remove the texture from the cache and delete the BaseTexture, and then I'm clearing Phaser's cache as well with:

game.cache.destroy();

But it looks like the browser itself (in this case Mobile Safari on iOS8; but it happens on Safari/Mac as well (haven't tested on Chrome yet)) is still retaining the images in its cache because I watch memory usage for the browser and it goes up each time an image page loads until all the images are loaded, whereas I would want it to be a series of "hills" where we recover the memory from an image page as soon as we get to a blank page.

 

Is this what is going on? Or is there some other Pixi/Phaser cache I'm not clearing? If the browser *is* hanging onto the images in its cache, how can I clear that out using the Pixi/Phaser framework?

[JDW]

Hello,

I had the same issue so I created a small function to clear a DisplayObjectContainer. It may be useful to you :

 

PIXI.DisplayObject.prototype.clean = function(remove){    var rmv = remove || false;    for (var i = 0; i < this.children.length; i++) {        this.children[i].clean(true);    }    this.removeChildren();    if(rmv)    {        this.parent.removeChild(this);        if (this instanceof PIXI.Text)            this.destroy(true);        else if(this instanceof PIXI.TilingSprite && this.tilingTexture)            this.tilingTexture.destroy(true);        else if(typeof this.destroy == 'function')            this.destroy(false);    }};

And when I need to really clean everything ever loaded, I do this too (because destroy doesn't remove the javascript object from the cache, it only free the webgl memory):

 

for(var texture in PIXI.TextureCache){var tmp = PIXI.Texture.removeTextureFromCache(texture);tmp.destroy(true);}for(var texture in PIXI.BaseTextureCache){PIXI.BaseTextureCache[texture].destroy(true);}

[kenray]

Thanks for your post... but isn't:

var tmp = PIXI.Texture.removeTextureFromCache(texture);tmp.destroy(true);

the same as:

PIXI.Texture.removeTextureFromCache(texture).destroy(true);

?? If so, then the only thing I'd need to add to it is: 

PIXI.BaseTextureCache[texture].destroy(true);

right?

[JDW]

I'm sorry, I answered a bit in a hurry without fully looking at your code. It looks like you are using 2d canvas. I do not know how memory works with 2d canvas but my guess is the browser does all the work. Do you have this issue with every browsers ? With webgl you can load and unload texture from the memory directly and PIXI knows how to do it.

 

Indeed, my code is totally useless to you as you encounter this bug on a very simple test case. Most of the time, memory leaks with PIXI occurs because of unloaded texts and tilingsprites.

[tengotengo]

Works 100% for me. PIXI v3.0.7

for (var textureUrl in PIXI.utils.BaseTextureCache) {
    delete PIXI.utils.BaseTextureCache[textureUrl];
}
for (var textureUrl in PIXI.utils.TextureCache) {
    delete PIXI.utils.TextureCache[textureUrl];
}

// if you use loader like this: var loader = new PIXI.loaders.Loader();
// it keeps all the img elements and doesn't have destroy method 
for (var textureUrl in loader.resources) {
    delete loader.resources.data;
    delete loader.resources;
}

 

Edited February 10, 2016 by tengotengo
stupid forum turned my code into a link and removed [url]

[xerver]

You can only free JS Heap and WebGL memory, by calling those destroy methods and losing your references so the GC cleans up. What you can't do is clear the browser's cache or manage the memory it uses.

Quote

// if you use loader like this: var loader = new PIXI.loaders.Loader();
// it keeps all the img elements and doesn't have destroy method 
for (var url in loader.resources) {
    delete loader.resources.data;
    delete loader.resources;
}

 

Just use loader.reset(), don't delete from the loader object.