PIXI canvas freezing 0.2 second every 10 seconds

[freddyInKorea]

Hello,

I recently noticed every 10 sec my PIXI canvas is freezing 0.2 second, and I don’t have any clue why.

CONTEXT

dependencies

"@types/pixi.js": "^5.0.0"

"pixi.js": "^5.3.9",

"preact": "^10.4.8",

 

PIXI.JS canvas is contained in PREACT component

I refresh the canvas this way

    private GameLoop(): void {

        if (this._stop) {

            return;

        }

        this._updater.Update();

        requestAnimationFrame(() => this.GameLoop());

    }

the updater contains 200 items which have more or less 3 sprites each, the updater iterates items in order to update the position of each sprite.

	public Update(): void {
		if (!GameSettings.IsPause) {
			this.Items = this.Items.filter((item) => item.IsUpdatable);
			this.Items.forEach((item) => {
				item.Update(this.ViewContext.GetX(), this.ViewContext.GetY());
			});
		}
	}

available environment:

https://kimchistudio.tech/DEV

I add some logs to know how much time it took for the updater to iterate all items. 

 [ALL] 12 ms
main.js:679 -> Cn 1 ms
main.js:679 -> Pi 1 ms
main.js:679 -> hn 1 ms
main.js:679 -> hi 0 ms

I haven't noticed anything in chromium profiler, There is no heavy calculation, the script in this environment only handles the display (no IA whatsoever). I have used PREACT for a while and I don't think these freezing are due to it.

Thank you very much for your helps

 

Edited June 23, 2021 by freddyInKorea

[ivan.popelyshev]

Probably, you call this a lot and it spawns many objects that clog GC: https://www.npmjs.com/package/luxon

Dont put heavy things that spawn many objects in render/update loops.

Spawning objects in render is ok only if you know that there aren't many or if you can prove amortization, like, "this objects is spawned once per this action, but this action is heavy itself so it doesnt matter" or "it actually cant be spawned more than 30 times per minute because reasons"

Edited June 23, 2021 by ivan.popelyshev

[freddyInKorea]

Hello ivan.popelyshev,

helpful as always :), even before I added these luxon variables for monitoring the updater I had these tiny freezes every 10 seconds more or less . However I like the idea that these freezes happen because the GC is collecting. I keep investigating

EDIT: Alright, I re-publish it  need two minutes to dockerize and push keep in touch

Edited June 23, 2021 by freddyInKorea
reply

[ivan.popelyshev]

If you re-publish it , I can try run profiler once more

[freddyInKorea]

alright it's deployed  meanwhile I am looking the profiler too  hehe 

EDIT: From my understanding,

- orange blocks are the execution time of the game's script,

- blue curve is the JS heap, each time the curve collapses it means GC did collect unused variables.

- red blocks are the frame rate.

 

From what I see:

The execution time of the game's script looks pretty stable, it generally takes around 5ms to be executed. Despite this stability, the frame rate seems to change from 10 to 30ms. When the fame rate is bad, JS heap is not collapsing. It means for me, I still can have a bad frame rate even if GC is not collecting. So this behavior remains a mystery ?

EDIT 2: it's a bit confusing, the profiler did record the tiny freeze,  but it's not obvious to spot when it occurs from the data.

When I am experiencing it, it feels more a freeze of 100 or 200 ms, it doesn't match the frame rate of the profiler

Second thought: Let's assume that the frame rate is good. So it means for some reasons,  there are loops in which sprite don't update 

well I think I see the same behavior in this example:

https://pixijs.io/examples/#/demos-basic/tinting.js

Every 10 seconds, it s possible to notice a micro freeze, I am starting to wonder if it doesn't come from my computer.

EDIT 3: the issue is from my computer, I used other devices and I don't have any tiny freezes, I am sorry for the inconvenience and thank you for your help Ivan

Edited June 23, 2021 by freddyInKorea

[Exca]

Does the micro freezing happen if you close your debugger? I have a similar issue with my computer currently where if I have chrome debugger on, then there's some stuttering but if I close it then everything runs really smoothly.

[ivan.popelyshev]

> the issue is from my computer

oh , that's what im usually afraid of, its difficult to explain people those kind of things. But anyway we found real performance drop with that time lib

[freddyInKorea]

@Exca

I just had to update graphic card drivers and the problem got solved hehehe

Edited June 25, 2021 by freddyInKorea