I want to find tools and technics about how to measure JS thread performance problems in production. I know how to do it in dev mode, for example, I can detect rerenders with https://github.com/welldone-software/why-did-you-render or use Flipper and React Dev tools. However, in production, we can come across slow devices and functionality which works fine on developer's phones or emulators can be slow.
How do you do with it? Maybe we can use something from the native world for IOS and Android.
I found an interesting solution - react-native-performance
It allows measuring:
App startup render time
Navigation render time
Screen re-render time
and send this data to analytics systems https://shopify.github.io/react-native-performance/docs/reporting
Also, it is possible to turn on/off it with feature flag.
Related
I am maintaining an App that has been created in React Native targeted at Android tablet devices. The issue that I am currently experiencing is that when the app is active but has not had any activity, the device will not go into sleep mode after the assigned period of inactivity whilst the is app active.
I have been attempting to find any processes that could be preventing the app from allowing the device to go into sleep mode and have not been able to find anything through Chromes debugging tools or Reactotron.
I did find this question App not letting device to go into sleep mode so my next step is to look at our third party packages as well as our own Java files, though our customisation of them have been very minimal and to the best of my knowledge there has not been any code added intentionally to stop a device from going into sleep mode.
What I am looking for is any additional tools as well as any methods that I could use to narrow down my search for this issue.
Was this application created using Expo?
If so you can prevent the screen from sleeping by using KeepAwake as documented here in the Expo documentation https://docs.expo.io/versions/latest/sdk/keep-awake/
There is also information inThe github repo which details how to use this in applications that aren't using Expo too : https://github.com/expo/expo/tree/master/packages/expo-keep-awake
Is there any way to track renders in your app while still using plain components? I'd like to use it for performance monitoring and testing to make sure that renders are in the correct ballpark during updates.
In the development mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
To do this in Chrome:
Load your app with ?react_perf in the query string (for example,
http://localhost:3000/?react_perf).
Open the Chrome DevTools Performance tab and press Record.
Perform the actions you want to profile. Don't record more than 20
seconds or Chrome might hang.
Stop recording.
React events will be grouped under the User Timing label.
Note that the numbers are relative so components will render faster
in production. Still, this should help you realize when unrelated UI
gets updated by mistake, and how deep and how often your UI updates
occur.
I'm building a React Native app (currently iOS only) and I found a very nasty bug that only manifests itself when 1.) running on a real device, and 2.) running without Chrome debugging. (Ouch, right?)
I'm using react-native-router-flux with tabs and when I tap on a button that loads a new tab route (Actions.tabRouteName), the screen goes blank. As I said, it works fine in the simulator, and also, on the device when I enable Chrome debugging.
Other things I tried: running on another device, reloading JS, rebuilding app in Xcode.
Any reason the behavior would be different in these different run cases?
Thank you.
Update: This appears to have something to do with animations and route switching. I posted more details in this Github issue. I also found anecdotal support for the idea that other people are encountering similar issues with debugging in this Github issue.
Any reason the behavior would be different in these different run cases?
It's because when you use remote debugging in Chrome, it practically runs the RN app in the browser (it then uses the V8 JavaScript engine) and communicates with the simulator (or device) through WebSockets. When it runs without remote debugging enabled, it uses JavaScript Core. There are many differences between these environments and these can cause inconsistencies, so don't rely much on running your app only with JS debugging enabled, it can give you false errors or hide errors that would actually cause problems on a real device.
We're developing quite heavy single page application (SPA). However, it recently started to crash from time to time and it appears almost impossible to debug it. The traditional tools such us firebug or chrome's tools were also not very useful (perhaps they were not used correctly?).
Is there any tool that would allow me to view a crash log of a tab where I could find what caused a memory leak (or whatever the reason for the crash was)?
Thanks
You can try to use Chromium which is kind of browser especially for developers.
It has a batch of plugins for debugging and testing websites and SPA.
For example for memory leaking you can try to use LeakSanitizer.
Currently I'm developing an Android App with Phonegap/Cordova (2.1.0/2.2.0) , JQ-Mobi(not jQueryMobile), HTML5 and Javascript and CSS3. The App contains 2 native exstensions.
Somehow, when I export my project to a device with the lastest Android version, the app runs so much slower than an 2.3.5 device.
I've tried enabling the HardwareAcceleration and removed all of the box-shadows and other tough to render css3 stuff. Still on a 4.1.1 or 4.0.4 it runs crappy.
I also upgraded to the latest version of Cordova (now 2.2.0) and it doesn't seem to make it better.
Javascript DOM manipulation happens for about 80-90% when the app is started.
The worst performance is in switching panels and scrolling through forms, most of them have some transitions in them.
I tested it on a Samsung Galaxy S2 android 2.3.5 and it look fine and performs well.
Same device, but 4.0.4 runs crappy.
Samsung Galaxy S3 4.1.1 runs even crappier.
HTC Flyer P512 with android 3.2.1 runs it how it should be running.
Can anyone help me out here? How do I get this performance up? Any Hint or Tips which I havn't mentioned?
I'd like to add that I don't get the issues on an Iphone 3gs and up to explain that it is definitly an Android problem.
My phonegap apps run smoothly on iOS, but perform extremely poorly on Android. As I understand it this is just because Android is much slower at interpreting JavaScript than iOS.
One thing that can help a lot is cutting down on the use of libraries such as jQuery and JQM. If you want to include them, don't use them where you don't have to.
functions such as jQuery.animate run notoriously slow on Android and you'd be better of iterating over arrays with raw JS rather than using jQuery.each etc. etc.
The problem is not just with graphical rendering, but with the speed at which JavaScript is executed. Although lowering the screen resolution can boost your performance.
Edit
I am trying to get to the bottom of this myself and the only answer I can get is to keep computational operations at a minimal.
Use libraries sparingly and solve your problems with raw and well written JavaScript when possible
Keep a small DOM and manipulate it as seldom as possible
Make use of JavaScript performance enhancing techniques
So it really seems that this is a core performance issue, rather than something that could be solved on the Phonegap layer. As a non-scientific example, the exact same init() function on one of my apps executes in about 1.2 seconds in iPhone 4s on average, while taking a sluggish 5 seconds to complete on my samsung galaxy s3.
The core of the problem is that everything is loaded and running in a single page (execution context), personally, though single page apps (sencha, jqmobile etc) are all the rage, the performance on modern devices does not do the user experience any justice. I would separate the app into different pages, this will significantly reduce the size of the DOM and create separate execution contexts for each new page, meaning that your main page (execution context) is nice and lean (DOM is small).
I had the exact same problem. I asked a similar question and eventually answered it myself here after a tonne of research:
Cordova/Phonegap slow performance with Open Layers on new Tablet, but fine on new phone
I won't repeat the entire answer I gave, but the slow performance on certain Android versions is due to what is essentially a bug in WebView which throttles the CPU support for GPU based processes, but doesn't provide GPU support to compensate.
Kitkat V4.4.3 upwards have this fixed, but older versions such as V4.4.2 which are still being used on some devices still suffer.
You can avoid this by not using WebView at all for the HTML rendering, and instead use Crosswalk. For our project this solved the problem entirely and we now have a smooth running application across all Android versions we're targeting. It's quite trivial to do as well.
https://crosswalk-project.org/documentation/cordova.html
https://blog.nraboy.com/2014/10/use-crosswalk-ionic-framework-android-apps/
Try using multithreading and background processing for resource extensive operations.
That worked for me when i had similar problem with one of my apps when it crashes when it runs on versions later than 2.3.3. I never worked with PhoneGap so I'm not sure how you are going to do it.