freezes React updating virtual DOM causes Pixijs freezes?

[ProbabilityRulesUniverse]

Hello community!

Unfortunately I have a game-breaking issue that troubles me a lot recently and I'm running out of ideas.

In my game I have built a frontend using React and embedded a Pixijs canvas on one page. While the game is running and the game loop (requestAnimationFrame() with a modest 50 ticks per second, additionally some "interpolation" code that renders interpolated position updates between the ticks to make the game look very smooth) updates the scene, React handles a scoreboard and a chat right next to it. Now for example, whenever someone writes a new chat message, the virtual DOM is getting updated to push a new <div> on the page, which is displayed right next to the Pixijs game.

The game itself is extremely smooth and runs perfectly. But when the elements of the page change (new chat message, new scoreboard results) it causes a small visual freeze in my Pixijs game. The loop still updates everything correctly as there is no desync between the server-side state of the game and the client-side state of the game, but visually there is a small freeze.

I believe that my Pixijs code is pretty optimized and I tried everything on the React side of things aswell. I managed already that React does not re-render the whole page but only the parts that actually update (the chat, the scoreboard). But it did not solve the issue. 

The weird thing is this: I tried a little experiment where I "spammed" many automatic updates (multiple every second) to the player scoreboard and chat using server messages that emulates the same behavior as when players manually type messages. And the game did not freeze much. But whenever I play the game with a couple of players and players write in the chat or automatic chat messages appear (e.g. informing everyone that a player left the game) or the scoreboard updates, there will be a small freeze frequently.

Does anybody have experience with a similar issue and could be of assistance? I'm willing to let you look into my codebase and you can also try out the game if you are interested to experience this issue urself. I would be very glad if someone could help me as this problem seems to make all my efforts in developing this game go to ruin sadly.

Edited November 28, 2020 by ProbabilityRulesUniverse
Adding tags

[ivan.popelyshev]

Look at extensions that you installed in the browser. Lst time there was problem like that at gameofbombs.com , it was actually Kaspersky extension

[ProbabilityRulesUniverse]

1 hour ago, ivan.popelyshev said:

Look at extensions that you installed in the browser. Lst time there was problem like that at gameofbombs.com , it was actually Kaspersky extension

The extensions are not the problem as the same behavior appears when using any browser (even freshly installed or using private mode). Also, I made a standalone client using electron, where certainly no extension like Kaspersky is troubling the client, and there also the same freezes appear.

Edited November 28, 2020 by ProbabilityRulesUniverse

[ivan.popelyshev]

Angular UI, canvas2d, 1000 multiplayer clients in same map, 2013 year, no freezes.

I guess you have to profile your react, maybe there's something strange with it.

 

[jonforum]

5 hours ago, ProbabilityRulesUniverse said:

The extensions are not the problem as the same behavior appears when using any browser (even freshly installed or using private mode). Also, I made a standalone client using electron, where certainly no extension like Kaspersky is troubling the client, and there also the same freezes appear.

 

Quote

The game itself is extremely smooth and runs perfectly. But when the elements of the page change (new chat message, new scoreboard results) 

For me , what seem bad here, is you seem use React for your game and pixijs in same process!
Try multi-tread your game, React is really heavy when update the Dom, is fine for app, but hell no for game engine!!!
Maybe you block your principal tread.

Node.js multithreading: What are Worker threads, and why do they matter? - LogRocket Blog
look for worker_threads 
Worker threads | Node.js v15.3.0 Documentation


this is old jsConf but also explain good js limitation  callStack

https://youtu.be/8aGhZQkoFbQ

 

Also you can use the profiler to see why you get lag if React are isolate from your game.
Look about your render durations and the Dom list elements impacted the ticks.

Edited November 28, 2020 by jonforum