Context
I’ve a number of small and huge video games written in PixiJS. Initially, these video games had been rendered on particular pages utilizing an iframe method. The web page was in a position to deal with a number of video games on the similar time till it reached its reminiscence limits.
For instance, after 6 video games had been loaded, the seventh sport would have reminiscence points, and the iframe would present a “reminiscence restrict exceeded” message. The necessary level is that this conduct was constant: on some gadgets, the difficulty appeared after 4 video games, on others after 5 or 6 video games. This conduct was acceptable.
Nonetheless, resulting from some characteristic necessities and limitations of our iframe answer, we determined to maneuver the video games into Shadow DOM. We migrated all video games to this method.
The whole lot appeared tremendous on desktop gadgets. We examined on totally different gadgets, together with older Android gadgets and newer iPhones, and the whole lot labored as anticipated.
We inject round 50% of the video games into the Shadow Root utilizing Module Federation, and the opposite half are injected utilizing a customized script-based construct course of.
The video games injected utilizing the customized script observe a selected construction: there’s one root class that comprises little one parts, and solely the basis class is injected into the Shadow Root. The remainder of the sport construction is created inside that root factor, constructing the entire element tree dynamically.
After some testing time, we found just a few small however very difficult-to-debug points.
I’ll describe the issues under together with my questions.
Drawback 1
Two separate video games had:
const lang = "en";
outlined of their code.
This brought about one of many video games to fail throughout loading. I don’t bear in mind the precise error message, however the thought was that the second sport couldn’t write to the lang fixed as a result of it was already outlined.
The difficulty was fastened instantly after renaming one of many variables to one thing like:
const lang2 = "en";
I knew that Shadow DOM can isolate and have an effect on CSS, however is it additionally attainable for one Shadow Root element to interrupt the JavaScript of one other Shadow Root element, or the JavaScript of the primary web page?
If sure, I want to perceive this conduct in additional element. The knowledge I discovered to date is just not deep sufficient, and I want to learn a extra detailed rationalization of how JavaScript isolation works with Shadow DOM.
Drawback 2
This subject continues to be not solved.
On iPhone gadgets, even a single sport forces your entire web page to refresh.
It doesn’t matter whether or not the sport is injected utilizing Module Federation or utilizing our customized script-based method.
I’ve analyzed the entire circulate and couldn’t discover something suspicious. I used Safari developer instruments and the debugger, however I don’t see any reminiscence spikes or something indicating that the sport is consuming too many assets.
For instance, we created a quite simple Pixi canvas with solely a spinning circle animation, and even that element brought about your entire web page to refresh.
We tried a number of fixes advised by AI instruments, however they didn’t appear related. I consider the difficulty is deeper than a easy configuration downside, however I have no idea the place else to analyze.
Extra Data
All video games use:
Initially, after discovering Drawback 1, I believed the difficulty is perhaps associated to static fields shared between video games. I eliminated all attainable static fields from the sport implementations.
At the moment, the whole lot is a part of an object occasion. The one remaining static-like usages are associated to:
I consider library variations is perhaps necessary. Essentially the most related one might be PixiJS, and we’re presently utilizing PixiJS v8.
If different library variations are additionally necessary, I can present them.
Extra Remark: Difficulty Resolved After Machine Restart
One factor fastened the difficulty utterly on an iOS machine.
One among our coworkers had greater than 140 pages open in Chrome on their machine. We closed all of them, however the subject was nonetheless taking place.
After that, we restarted the cellphone following a suggestion from some documentation, and the difficulty was utterly fastened. The issue has by no means occurred once more on that machine.
Nonetheless, we can not ask our shoppers to carry out these steps each time this subject happens.
