Jump to content

React updating virtual DOM causes Pixijs freezes?


ProbabilityRulesUniverse
 Share

Recommended Posts

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 by ProbabilityRulesUniverse
Adding tags
Link to comment
Share on other sites

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 by ProbabilityRulesUniverse
Link to comment
Share on other sites

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.
image.thumb.png.3d1ebc99a88f1f907e59167450819a9a.png

Edited by jonforum
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...