I was wondering if anyone else was having the same problems and if there are any solutions out there...
I've created an app using Material-UI and Meteor JS. All was well until I updated Material-UI to v5, where they totally changed how components were styled, now they are using #emotion.
I'm now getting a lot of noticeable performance issues with certain components on first use. And a lot of warnings in the console along the lines of "[Violation] 'foobar' handler took xxxxms".
For example, if you have a Material-UI Dialog that is popped up by clicking a button, then the first time that dialog is popped up, it can take 1-3 seconds. Subsequent pop-ups are 'instant'. If you force-reload the page, then again, on first use, you get the performance issue.
I wondered if it was something to do with the complexity of my app or some odd interaction, so I just created a brand new Meteor project (the default React one that has a button that increments a counter), installed Material-UI v5.0.6 and then replaced the button on the default app with a Material-UI component.
Immediately, I get console warnings about performance issues. In this case a warning about DOMContentLoaded taking too long on page load, then one when I click the button 'mousedown' handler took 300ms.
Opening up Chrome's Performance doo-dar, I see a first click takes around 300ms and LOTS of things are going on under the hood in emotion. One subsequent clicks, very little is going on under the hood and the event is around 3ms, ie, 100x quicker.
Any thoughts on this out there?
Related
I have a component that is using React Transition Group to animate a component as it changes from one component to the next.
The problem I am having is that the next component is loading before the current animation is finished, so it looks a bit odd.
I think i could solve this if it were possible to delay the render() method when the component updates, as it never really unmounts, and this is why the component flashes the next image.
there is FAR too much code involved to paste it all here so i made my github public, and created an issue there to show what I am experiencing.
also you can view the site as it is live for this debugging session.
stevensheaves.me
Also, no judgy, its not 100% finished.
You can simply use the callback of the Transition Group namely onEntered.
A callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.
You can use a flag variable to display your content. Set it to true when the callback is fired and to false when it's onEntering
We are currently testing parts of our application that open in popup windows. These windows are subclasses of TitleWindow. The issue we now run into is that the popups seems to be registered multiple times and that tests are sometimes executed on popups that have already been closed (or so it seems).
I thought this had to do with the way we closed and removed our popups, but I can't really spot any problems there. After looking into the FlexMonkey source code, I saw that there is an explicit check for "TitleWindow" in the ADDED_TO_STAGE handler, after which the popup is added as an application window. But the popup never seems to be removed from the "_windows" collection. As a result, when you open the tree view in FlexMonkey, there are several instances of the same popup window class. This probably also explains why our tests sometimes do not seem to run (visually), but execute and verify correctly, as they are ran on a hidden instance of a popup. I would expect the MonkeyAutomationManager to also listen to REMOVED_FROM_STAGE events and remove the popup when it is closed.
Am I missing something here or is this an (known) issue?
My guess is that it isn't an issue, it's simply that your code isn't properly cleaning the object and removing it from the display list. You also need to remember that garbage collection does not run right after you remove something from the stage. It could be possible that your window, even if it has been removed from the stage is in fact still listening and responding to events.
I have a Flex app I built. It uses the BrowserManager class to listen for changes in the # part of the URL. When a change is made to the hash my application updates accordingly so you can link directly to a state of the application. Also inside my programming when a user clicks something, all I do is use the BrowserManager to update the # and then my listener will apply the correct changes once its finished. I believe this is the best practice way to doing this in Flex.
I have some issues though. When using the Back button in FF or IE, it gets "stuck". for example if the hash is like #state4 clicking the back button will take you to #state3 then #state2 but sometimes get stuck where you can be on #state3 click the back button, see it flicker to #state2 real quick then change back to #state3 preventing you from going back any further in your history.
Now in Chrome its even worse. As you make your way through the application the hash # is updated and so the application updates (proving that the app can see changes in the hash since thats the only way it updates). but when you click the back button, the hash # goes back to its previous state, but my application does not as if it is unaware the hash is changing.
I find this very bizarre and don't know what to make of it. I was wondering if anyone else had experienced this or knows what might be the issue.
To see it in action go here and navigate the builder (it will ask you to click jewelry type, metal, etc.) a few times until you see the big red add to cart button, then try to use your back button to get back to this page.
Have you tried the History Manager. Have a look on the http://www.nbilyk.com/blog/1/68/flex-history-manager
Have a rather bizarre issue with Flex throwing an error when teh application is running in the background. I use Selenium and SeleniumFlexApi to run various tests against my app. If the browser window is in the foreground or any part of it is visible to teh screen, the test pass as expected. However, if the window is in the background and not visible, I am getting the following error in 1 part of my app.
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
I have a VBOX that creates a number of children and then upon creationComplete(or UpdateComplete, I've tried both) it then needs to remove any of the children that are not visible. Each child has a listener for CreationComplete which checks if the child is visible and if not, adds it to an array which is iterated over when the parent UpdateComplete is fired. I cant seem to find any reason for this behavior and am curious if its an issue with the Flex Component LifeCycle.
The most recent version of the Flash Player (10.1) will automatically "slow down" when minimized. I think it drops to a couple of frames a minute [as opposed to the standard 24 per second for Flex]. I don't know specific number.s This is for performance and 'battery life' reasons.
If there is anything in your app, or in your testing, that requires specific timing or uses a timer, then this will easily break unit tests.
I've heard from other folks that this have other folks that have had issues with this. The best solution I've heard proposed is "Add a flag to turn this off; even if it's only in the debug player." But, there is no solution right now other than "run your tests w/o the app minimized"
I came across this topic today while investigating something very strange. Doing certain things in our Flex app can cause the number of frames rendered to rocket, from 12fps to ~30fps: loaded animations start playing at high speed and the GUI starts to lock up.
Since everything I've read on Flex/Flash hammers home the point "the frame rate is capped at the fps set in the top level app", it seems the only way these extra renders can be happening is due to some events causing them (no programmatic changes to the stage's framerate are done anywhere). Since it only happens when I put my update logic in the ENTER_FRAME handler, I'm trying to figure out what might be happening which to apparently causing Flex to go render-crazy.
Hypothesis: something in my update function is triggering an immediate screen update, this raises another ENTER_FRAME immediately, which means my update loop gets called, which triggers another immediate screen update, ...
We have Flex components used in our GUI, if this is a factor. I don't really know where to go next on this.
Clarifications:
When I say things speed up, there
are two ways this manifests.
Firstly, my ENTER_FRAME handler gets
called far more often.
Secondly, a
loaded Flash SWF with a looping
animation built in suddenly speeds
up to te point it looks silly.
I am not using updateAfterEvent, I only
found this existed when researching
this problem. Apparently, some
events on Sprite subclasses
automatically call this and I wonder
if that's the root cause.
I am not doing any direct messsing about with rendering at all. Background animations play automatically as they have timelines built-in from CS3 authoring, all our update function does is change the position of DisPlayObjects or add/remove them etc
Update:
I added a label to my app to print out stage.frameRate, and discovered at certain times, it suddenly changes from 12 to 1000 (the maximum allowed value). While it was trivial to add a line to my ENTER_FRAME handler to reset it that's hardly a big help.
Also, even doing this, the rendering is all messed up. Certain actions (like raising an Alert popup) make it all spring back into life.
Unfortunately, I am not able to view the source of the Stage class to set a breakpoint on the setter property.
That's very interesting about the Flex loading 'set to 1000fps' thing. What we have are several Flex applications which all provide a common interface. A master app is in charge of loading these modules as required through the SWFLoader class. However, the loading process already takes into account the delayed loading... when the SWF loads we then wait for the APPLICATION_COMPLETE from the SystemManager. Once this is received, shouldn't the applications completion have occurred?
Flex sets the frame rate to 1000 during "phased instantiation" of Flex components, which occurs only during initial load of a flex swf. This allows it to build all components very quickly.
Are you waiting for the Flex app to be fully loaded and constructed? You should be waiting for FlexEvent.CREATION_COMPLETE before working with your Flex content.
If you would like a reference to where this occcurs, look in the Flex LayoutManager class, line 326 (using Flex SDK 3.0.194161), in the setter for the property usePhasedInstantiation.
Update:
APPLICATION_COMPLETE should have you covered for the initial load.
This actually happens any time components are created directly from MXML. So there are a few other cases to look for. Are you using any Repeaters? Do you use any navigation containers that are building their children on demand?
One thing I'm not clear on - are you seeing that the actual screen refreshes are occurring faster than the published framerate? Or is it that your animations are moving faster but the screen refreshes are unchanged? (i.e., it used to move 10 pixels per second, but now it moves faster than that, regardless of how often the screen is drawn.)
An easy way to check this would be to try publishing your content at 1 fps. It should be clear whether the screen is redrawing once per second, but animated elements are being moved more frequently than that, or whether the screen is actually updating more frequently.
If the latter, are you using any updateAfterEvent() methods in your code? This can cause actual screen refreshes to occur faster than the published framerate. It shouldn't affect ENTER_FRAME events though. You should still only get one of those per frame update.
Alternately, are the things you're animating just Sprites and so on, or are you implementing them as Flex components, and trying to redraw them with invalidate() methods and RENDER events and so on?
If you could clarify a few of these points in the question the answer might be clearer. Thanks...
Thanks for the clarifications. If a loaded clip with a animation (I assume you mean a frame animation) is speeding up, then that certainly sounds like something is changing your playback framerate, as opposed to other things that could be going on. With that said it's not a problem I've seen crop up before, but I do think there are some things you could try that ought to narrow down where the problem is:
You might as well try tracing out stage.frameRate during the speed-up. Presumably nothing ought to be changing your framerate, but since that would explain your issues you might as well rule it out.
Try removing as many GUI components as possible and seeing if the problem still occurs, if it's possible to trigger the problem without them.
One sanity check you could try, if it's feasible, is to copy some of the contents of your game into a fresh project and try it there. Sometimes mysterious issues like this happen because some class or SWC is being imported somewhere that everyone forgot about.
You could try driving your code from a different event. For example, as far as I know driving it from Event.EXIT_FRAME or Event.FRAME_CONSTRUCTED ought to look the same, but if it doesn't then that's a hint. Alternately, you could try driving it from something like a keyboard event or MouseEvent.MOUSE_MOVE. Then if updates occur even though you're not firing events, you'll know something else is driving things besides your event loop.
Those are the things I'd try, anyway. Hope you track it down...