I have a flex/actionscript based project. The project has various view stacks and tab navigators and a few popup windows. The whole thing is managed in pureMVC framework.
When transitioning between various view states, opening a popup, switching a tab, etc, I find the app to exhibit various redraw glitches. Parts of views will be partially drawn or flicker in odd ways. I am fairly confident that the code is working correctly, just seems to be an issue with the overall heaviness of the UI.
Is this a common issue? Are their tried and true techniques to optimize this problem?
In particular what event handlers are available to delay the drawing of view components until the last moment when everything is ready to quickly display to the screen?
Say for example I have a VBox inside a viewstack, and inside this VBox I have a fairly complex datagrid. Can I prepare the datagrid and/or delay the viewstack change until all subview components are in fact ready to be quickly drawn.
What are some possible symptoms to this kind of glitchiness?
just a guess, but this might be related to the flex framework ... i experienced this kind of behaviour too ... i guess it is related to the way flex framework works when carrying out ui tasks ... a lot of deferred instantiations/calls and so on ... when there is a lot going on, the framerate drops and since deferring is framebased, that is probably when the resulting delays become noticable ...
greetz
back2dos
Not sure if this applies to you, but in Firefox/OSX there is a known bug when you make too many javascript calls, and the result is similar as you say... the whole interface shows various glitches and flickers... The solution was to delay the JS calls a bit, so they don't get called too often... this was a serious issue with swfaddress for instance (I think it still is).
http://www.bigspaceship.com/blog/labs/mac-firefox-30-flash-javascript-random-artifacts/
I assume you need the datagrid already attached to its parent container and you are loading data while it's being shown so it constantly updates and renders its content.
Have you simply tried setting its visibility to false until everything is loaded while keeping includeInLayout true and giving it a fixed size?
Related
I'm writing a graphic console that highlights different entries and stores things when you input them (in AS3) but I've found that once there are thousands of entries, the program starts lagging and scrolling is slow. If I want scrolling to be animated with acceleration it gets even slower.
How do I move the giant block of objects that are my stored entries up and down?
Do I have to progressively load messages around where the user is looking? How does the scrollbar handle this, then?
you should create a custom container instead TextField, it would be easier to build an accelerated scrolling too,
each log entry would be an extended DisplayObject that holds anything you want just like inflating layouts in android.
the most important part should be reducing Memory usage:
you may only store plain text of log enteries in something like a global array and when scroll position is close enough, generate this layouts, then adding them in container to show, and vice versa for removing far behind chats.
however this proccess stills using much memory during runtime.
so, just according the concept of android's DiskLruCache, it is possible to storing some part of our invisible data which would be too far from our scroll position to disk instead memory, using SharedObject's.
How do I move the giant block of objects that are my stored entries up
and down?
You don't. As you have noticed, when the number Display Objectson the DisplayList greatly increases, the memory overhead increases and the housekeeping details of managing the Display Objectseventually causes performance to suffer. You don't mention any details of how you are implementing what you have so far so my comments will be general.
The way this is handled by various platform list components in Flex, iOS and I assume, Flash, is to only display the minimum number of objects needed, and as the user scrolls, objects are shuffled in and out of the render list. A further optimization is to use a "pool" of "template" objects which are reused so you don't pay a initialization time penalty. There is probably an actual name for this ("...buffering...") technique but I don't know what it is (hopefully some kind person will provide it and a link to a fuller description for how it works).
And as for how it works – you can DIY it, figuring out, as the user scrolls, which objects are moving off-screen and can be recycled, which are going to move on-screen, etc. Of course this all assumes that you have your objects stored in a data structure like and Array, ArrayList or ArrayCollection. As an alternative to coding all this from scratch, you might see if the DataGrid or List components will meet your needs – they manage all of this for you.
Flash Tutorial: The DataGrid Component (youTube video)
Customize the List component
Lots of other examples and resources out there.
(again, I work in Flex where the DataGrid and other list-based components can customized extensively using "skins" and custom item renderers for visual style – not sure if it is the same in Flash)
I've ran into a (hard to catch) issue using transitions between scenes in Cocos2d-x.
Basically I normally do a fade in-fade out like this:
Director::getInstance()->replaceScene(TransitionFade::create(0.5, scene, Color3B(0, 0, 0)));
It looks visually good and proper and all but I realized that it can be dangerous. If I have a button to go from Scene A to Scene B this way, the transition will run for 0.5 seconds as per the above implementation. When tapping ONCE and waiting, everything will be fine but if you tap very fast, it IS possible to have the event of the button called another time, even though the first transition call is already under way. This can, and I think in my case, lead to all sorts of strange and dangerous things. Especially for me who often use a protocol/delegate pattern for fetch data callbacks etc.
Want we want to do is to disable any UI (at least, possibly more?) on scene A as soon as the transition starts just to be sure that no other pushes are possible to the same or any other button, causing more transitions to be launched which could cause harmful things. Or there should be some kind of feature within cocos2d-x to always refuse transitions if one transition is already under way... To me that sounds like the most sane thing at first thought.
Is there anything I missed or are transitions in cocos2d-x really this dangerous? Anyone tackled this? Maybe a way to check if a transition is already under way would be one way for me to get around this problem without hacking around on cocos2d-x itself?
The virtual cocos2d::Node function onEnterTransitionDidFinish() could be used to unregister your callbacks for web requests etc.
Assuming you don't use the cocos2d-x event system for any app logic during a transition you might also consider disabling the EventDispatcher to block the propagation of touch events.
You could simply disable the button after it triggers.
Or you could be super lazy and create a Layer/TouchListener to intercept touch when a transition begins (onEnterTransitionDidStart()), and destroy it along with your scene :)
I have written a control that makes a star formation, the number of points and the length of each point is configurable via dependency properties. I can bind them to Slider controls and it all works.
Now I've written a behaviour that 'injects' this star control into the visual tree of a loaded control and then, in code, makes an animation to make the star grow and disappear like a cartoon flash going off.
My animation doesn't run. The Storyboard.Completed event fires, but a breakpoint in the change handler for the dependency property being animated is never hit after its initial setting when the page loads.
I'm using a couple of DoubleAnimation instances.
(this is Q/A I solved it after 3 hours)
You need to set the EnableDependentAnimation property on your DoubleAnimations. From MSDN:
Not all custom animations you create can run by default in a Windows
Runtime app, if the animation system determines that the animation
might cause bad performance in your UI. Animations where the system
determines there could be a performance impact are called dependent
animations. It's dependent because the clocking of your animation is
directly working against the UI thread, which is also where active
user input and other updates are trying to apply the runtime changes
to UI. A dependent animation that's consuming extensive system
resources on the UI thread can make the app appear unresponsive in
certain situations. If your animation causes a layout change or
otherwise has the potential to impact performance on the UI thread,
you often need to explicitly enable the animation to see it run.
That's what the EnableDependentAnimation property on specific
animation classes is for. See Dependent and independent animations for
more info.
Very discoverable. Lucky you chose to RTFM on this day, else you could have ended up writing your own timers and stuff to force all the rest of the work on the clever star control not to have been wasted.
I have a huge code execution with many loops and pre-rendering processes and I was wondering if there is a way to tell the flash player to take a little pause on the code side and do a render.
Basically I have my execusion that takes a while, and on each step I make a call to a screen and then modify the scale of a loading bar. Now the problem is that the user only sees the progress at the end, I know this is due to the fact that flash does code execution and then render, i tried to make calls to stage.invalidate to force a render but it wouldnt work until the whole execusion if finished either. Is there a way to force flash to render between two lines of code?
I encountered a similar problem in which my AS code would be running for a long time and the UI was getting unresponsive. So I implemented my logic as a Green Thread.
Check out this link for an as3 implementation and examples.
UIComponent has a rendering "framework" built into it. All display objects extend from it.
This will allow you to optimize your code, by using the invalidate methods.
You will want to familiarize yourself with pseudo-threads.
I am developing a jQtouch app and each request done via ajax creates a new div in the document for the loaded content. Only a single div is shown at any one time.
How many div's can I have before the app starts getting unresponsive and slow?
Anyone have any ideas on this?
EDIT: Its an iPad app running on Safari, and it would be less than 1000 div's with very basic content
I've had tens of thousands, maybe even a hundred thousand divs, on screen at once.
Performance is either fine, or bad, depending on:
Parsed from HTML or generated Dynamically in JavaScript?
Parsed from HTML means you have a LARGE html source, and this can make browsers hang. Generated in JS is surprisingly fast, even on Internet Explorer, which is the slowest of all browsers for JS.
To be honest, if you really need an absolute answer to this question, then you might want to reconsider your design.
No answer given here will be right, as it depends upon many factors that are specific to your application. E.g. heavy vs. little CSS use, size of the divs, amount of actual graphics rendering required per div, target browser/platform, number of DOM event listeners etc..
Just because you can doesn't mean that you should! :-)
As others have said, there's really no answer.
However, in this talk about the Google Maps API version 3, the speaker brings up the number ten thousand several times, as a basic threshold for browser unhappiness.
http://code.google.com/apis/maps/documentation/javascript/
Without defining a particular environment, it's not possible to answer your question.
And even then, anything anyone tells you is just a guess. You need to do your own testing on real-world configurations with different browsers and hardware. You'll also need to establish some performance benchmarks to decide what "too slow" even means.
I've been able to add several thousand divs without a problem. Depends on what you'll be doing afterwards, of course, and the memory on the client machine. Everyone else is right about that.
As Harpo said, 10K is probably a good ceiling. At one time, I noticed speed problems starting at about 4K divs, but hardware has improved since then.
And, as Neil N said, adding the divs via scripting is better than having a huge HTML source.
And, to answer Harpo's comment, one way to "break it up" so that JS doesn't lock the page and produce a "page is running slowly" error is to call a timer at the end of each "add a div" routine, and the timer in turn calls your "add a div" function again.
Now, MY question is: is it possible to "paint" so that you don't need to add thousands of divs? This can be done with the canvas tag with some browsers, but I don't think it's possible with VML (the excanvas project) on IE. Or is it? I think VML "paints" by adding new elements to the DOM, at which point you may as well use DIVs, unless it's a simple shape.
Is it possible to alter the source of an image via scripting? (the image in the DOM, of course -- not the original image on the server.)