So I built what I hoped would become a simple android game. I first built a web version to getting it working (http://scolvin.com/ballgame) then moved it to PhoneGap and used accelerometers to control the game. The only problem (and it's a show stopping problem) is that the result is horrifically slow (updates i guess about once a second instead of ever 20ms ish).
Is this just how slow phonegap is, with no current solution? Or is there some golden bullet I'm missing?
The game uses easeljs and box2d-web.
What's odd is it seems to run at a reasonable speed on android chrome, but very slow on android's "browser" (which I seem to recall is based on firefox?) and in phonegap which presumably uses the same html renderer/js interrupter.
I've tried simplifying the game, getting rid of as much as i can, using setInterval rather than accelerometer.watchAcceleration all to no avail.
It's a problem of the Android Browser
See the following answer:
Sencha Touch 2 - Android Performance
(It's for Sencha Touch, but i think the main points of the answer are the same)
Instead of using setInterval() for FPS thing, you must use requestAnimationFrame() It is far more efficient
iOS 5+ and Android 3+ use hardware acceleration for Canvas, so you will need atleast those devices for solid performance. Anything before iOS 5.0 and Android 3.0 will use CPU using software-rendering.
So need to keep that in mind
Is the performance issue with rendering or reading the accelerometer? Maybe you could create a demo mode to check how it behaves without user input.
Related
The UI of my react native app drops regularly but only on iOS. I attached a screenshot which shows the UI fps of about 11. Also it's a very steady wave and keeps happening several times. This leads to a annoying lags like for example during transitions, animations or during countdowns like on the screen attached.
Any experiences with similar problems or ideas how to solve it or what's the reason for this?
Also important to mention, that it both happens on iOS simulator and real devices. Android doesn't have these problems.
Did you by any chance left some console.log in the AppDelegate files? I had a similar problem and mine was that the console was logging like crazy. Check your device log.
Running in development mode is actually a major performance issue. Maybe trying to turn that off will help:
https://facebook.github.io/react-native/docs/performance.html
Also, try to interpolate as much of the animations as you can:
https://facebook.github.io/react-native/docs/animated.html#interpolation
Other than that, most companies who use react-native actually do the animations in native code and bridge responses to do the animation itself:
https://www.youtube.com/watch?v=rwQ6yxddKz4
I am developing a Chrome App which is based on the same code as the normal web based version. It's a web-audio app so quite performance critical for timing purposes.
I have noticed whilst holding down the mouse button within the app and wiggling it around, performance drops significantly, enough to mess up the timing. This issue does not occur in the ordinary browser based version which is running the same code.
I have recorded the activity with the Chrome developer tools and the only thing I can spot that does not happen with the browser based version is a function call to updateAppWindowProperties - which is a built in Chrome App function.
I have attached a screenshot of the dev tools recording where you can see 3 big spikes in the activity, these are the bits where I am holding down the mouse button and moving it around.
Anyone know what the cause of this could be, is it something to do with the Chrome App checking the window size?
It seems to have been fixed by reducing the number of css classes. I had a LOT of classes that were used only for jquery selectors, I changed them to data attribs and that seems to have fixed the performance issues.
I'm working on a three.js project in which I am using TrackballControls to enable touch events. But I found that my code were not working properly. I also evaluated some working examples like http://threejs.org/examples/canvas_geometry_cube.html and found at start there is a small delay of 300 ms. But it do affect a lot in my project. How could I remove this 300 ms delay?
Note : I uses both single and multi touches in my project.
I went through the concept of fastclick ( https://github.com/ftlabs/fastclick ), but for me it doesn't seem to support multi touch. If I'm wrong, please correct me.
I remember hearing something about this: http://code.google.com/p/chromium/issues/detail?id=133391
According to the linked issue, in Chrome for Android the reason for the 300 ms delay is to recognize a double-tap zoom gesture. With the change made there (in October 2012), the delay will not be imposed if the page cannot be zoomed. So, at least in this case, what you need to do is set your page meta viewport options so that the page fits the device screen and doesn't zoom.
(Disclaimer: I've never tried this myself; I just heard about it once. I have no idea if this behavior is in current released Chrome for Android, and I don't know whether other mobile browsers, such as the stock Android browser, do the same.)
(Other disclaimer: I work for Google, but I don't work on Chrome, and I am not answering on behalf of Google here.)
Finally I found a way... I was using touch to drag and drop an object in the scene... The actual problem was as follows... The 300 ms delay of touch events get combined to form a large delay... In order to overcome this, I gave a condition so that touch move events are taken with a delay of 300 ms... i.e if one event is taken, the next event taken will be the event after 300 ms... and its working quite fine...
I'm hardly trying to find a good solution for creating smooth animations on mobile devices, especially on android.
First I found out that using javascript is no option -> android is SOO sadly slow with it
Then I found CSS-transitions -> android still horrible lagging
Then I found this script and seems to work fine (webkit transformation?)
Can you tell me how to do it right? Maybe there are better ways..
Also I don't really want to use a third-party script, even if it is lightweight.
android supports css transitions since at least version 2.1 http://caniuse.com/#search=transition
what are u exactly aiming at? what browsers, and on what devices are you testing? keep in mind that slowness could be happening because hardware and not software limitations
I have a problem where Mobile Safari crashes when loading and manipulating the DOM with jQuery when the pages get too big.
I get the same problem on both iPhone and iPad.
What are the best way to troubleshoot mobile pages to find the error? Are there any known problems that might crash Mobile Safari?
I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.
The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?
So the bottom line is: -webkit-transition crashed the page on mobile safari.
Had the same issue, for me it was -webkit-transform: translateZ(0); that caused the crash of Safari.
I know this question has been successfully answered but I just wanted to put my five cents in too as I have been banging my head against the wall over this one quite a few times:
As most answers have pointed out already it usually comes down to memory issues. Almost anything can be the last bit that finally tips over the "memory pile" much like a translateZ or anything else.
However in my experience it has nothing to do with the actual CSS (or JS) command in specific. It just happens to be that the last transition was one too much.
What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.
The main issue with any iOS app is memory usage. So, it is likely that your pages are using too much memory.
Mobile Safari use some clever technique so that not the whole page has to reside in memory at any given time, only a portion of it. Maybe you could check if anything in your page defeats this mechanism or makes it less effective.
In any case, to give more up to the point suggestions, more information about your page would be really great.
By the way, you could have some hints from the crash log that the device store. Check to see if you can find it under Settings:
General
About
Diagnostics & Usage
Diagnostics & Usage Data
If it's a memory problem, you should find something like "signal (0)"; not sure if this can only mean "killed due to memory usage", but I usually take this for granted when I found a signal (0).
Otherwise, it might tell you what is wrong...
Hope this helps.
There are both memory limits and Javascript execution time limits, though it's a little fuzzy as to how you may actually hit those. Common reports come in that a page with a size greater than 10MB will have issues, and Javascript execution is limited to 10 seconds.
See Apple's documentation for more info.
I recently had an issue with mobile safari crashing on web-app pages containing a lot of images (30+ were enough) and a few transformations for the menu. After a lot of trial and error, I settled with a solution similar to what LinkedIn does, but for infinite scrolling using angularjs. I used requestAnimFrame and two expanding/shrinking divs (with js style attributes) on the top and bottom of the list to remove all image containers (with other stuff overlayed on top) except for a few ones which are close to the viewport. Scrolling performance (native, no js) is fine and memory consumption is in check.
I had a similar problem, the web page worked like a charm on android devices and crashed on IOS (iphone and simulator).
After a lot of research (using also the ios_webkit_debug_proxy) I found that the problem was connected to the jQuery ready event.
Adding a little timeout solved the problem. My application was also using iframes.
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});