Acumulation of memory when I reload the page

Questions
1

Hi, I have a problem with memory of my laptop. My app use about 1,5 GB of memory, and each time I reload the page to check the new code out, the amount of memory increases, that is, next time the memory is 3GB, and the next time is 4,5GB and so, until the system crash because of lack of resources.
I’m using Mozilla Firefox for Ubuntu, Firefox Quantum 68.0.1 (64bit), Ubuntu 19.04.
The same issue with Chrome

2

I think RAM per process is limited to something around 2-4 GB actually. But we can’t look into your app and tell you what causes the memory issues, please provide more details/code.

3

cosmos.js (20.1 KB)

I set up the render and camera and orbits in function ‘init’
then, I add an sphere and 360° image in creaCosmos function.

I disabled the load of files and readings from a database for demostration. I’m using Lampp for that.

as you can see in the png files,memory is in 3.35 GB aprox without my app.
When I load my app, RAM is 3.69GB (NOT BAD)
When I reload the page, RAMM is 3.84GB
When I reload again, RAM is 4.07. And after 4.20GB
(upload://agtpy5A5pWEzagX6Iu7XTJuHDKd.jpeg)

myapp
myapp.jpg3286×1080 866 KB
RAM3-64GB
RAM3-64GB.jpg3286×1080 1.1 MB
RAM3-84GB
RAM3-84GB.jpg3286×1080 1.13 MB
RAM4-07GB
RAM4-07GB.jpg3286×1080 1.11 MB
RAM4-20GB

4

the code
cosmos.js (20.1 KB)

5

I had a similar problem. A dude from github suggested killing the image mipmap data after it’s been sent to GPU since it in most cases isn’t needed in javascript anymore. Took my memory usage from like 800mb to 50mb. This is from my code but you should be able to adapt it.

function releaseTexture( texture ) {

	if( texture ){

		if( texture.image instanceof Array ){

			for( var i = 0, len = texture.image.length; i < len; i++ ){		

				if( texture.image[i] ){
				
					if ( texture.image[i].mipmaps ) {

						texture.image[i].mipmaps.length = 0;

					}		

					texture.image[i] = undefined;				
				
				}

			}

		}else if( texture.image ){
			
			if ( texture.image.mipmaps ) {

				texture.image.mipmaps.length = 0;

			}			
			
			texture.image = undefined;

		}
		
		if ( texture.mipmaps ) {

			texture.mipmaps.length = 0;

		}		

		texture.onUpdate = undefined;		

	}

};

var tex = myTextureLoader.load(src);

tex.onUpdate = function(){ releaseTexture(tex); };
4 Likes
6

Does anyone have the same problem?

2 Likes
7

Hi @ricardo, I am having the exactly same problem. I am creating a space traveling 3D game, when my ship goes to another space sector (that means I reload an iframe with space data), the memory consuption grows and grows.
After trying a solution for months, I am thinking about give up the development.
Using Chrome on Mac.

8

Hi @Luiz_Imbroisi_Filho, don’t give up. I’m not sure but It seems is all browsers problem. I didn’t try with babylonJS, may be you can.

9

Hi @ricardo!
The program is already very big, I’ve just realised the issue after having over 100 star systems up and running. I’ve made an automatic fly process (autopilot) between the systems, so the problem appeared.
Trying babylonJS will be very hard (I’ve never worked with it), and there is no garantee it will work anyway.
I’m thinking of tweaking my program for microfrontend, and see what happens. I mean, stop using iframes and load everything each time the ship enters a new sistem.

10

Hi @ricardo, I think I solved my problem.
Actualy the problem was with the iframe, that DOES NOT DISCARD anything from memory when you navigate to new url. When you are in url A and goes to url B, all the content of url A remains in memory!
Not just with ThreeJS, but for everything.
My solution: instead of just navigate inside the iframe, I memorise (sessionStorage) the new iframe url and reload the entire page (the parent one), and navigate the iframe with the momorized value.
This way everithing is discarted from memory, and there is no memory leak.

1 Like