5 Replies Latest reply on Oct 9, 2017 4:53 PM by augmandino

    Performance problems on Android WebView (Chromium) vs. Crosswalk

    martinb77004568 Level 2

      Hi,

       

      I have been developing a hybrid app for a pretty long time now using PGB. The app runs smoothly on iOS (yes, even on UIWebView) and on Android with Crosswalk 22. Since active development on Crosswalk has been stopped, I was thinking about removing the plugin and to use Android's "native" WebView (that's what I will be calling the WebView app in the following text).

       

      In theory, the native one should be faster - it uses Chromium just like Crosswalk, but the version I tested it with is 59. Crosswalk uses an older one. But the complete opposite is the case. I made a short video. The Crosswalk one runns really smoothly (at this point, you have to trust me since it is more the video that made this all look not that smooth). The native one on the other hand seems to have huge problems rendering the screen.

       

       

       

      (Both apps use the same code base.)

       

      I know that I can hardware-accelerate individual elements using css transform to kind of fix it - but that's not the point of this question. I am wondering why my app is running smoothly on iOS and on Crosswalk but the native one is so slow compared to the other ones. There must be some difference between the implementation PhoneGap/Cordova are using compared to Crosswalk. Especially since both are using Chromium.

       

      You can find my config.xml below (I have removed some unnecessary entries).

       

      My questions:

      1. Is there any setting I could be missing that could make my app run smoother?

      2. I had a look at cordova-android. I am not the best Java developer but am I right that cordova-android/SystemWebViewEngine.java at master · apache/cordova-android · GitHub  is the main file initializing the WebView? If so: I would expect to see sth like

      setLayerType(View.LAYER_TYPE_HARDWARE, null);
      

      or

      setLayerType(View.LAYER_TYPE_SOFTWARE, null);
      

       

      But there doesn't seem to be a setting like this. As a result of this, the WebView is probably rendered in the default LAYER_TYPE_NONE. So there is no offscreen buffer or similar. This could explain why my app isn't running smoothly. Did I understand this correctly? If so: What is the reason why Cordova isn't using hardware acceleration?

      3. Is it possible to override a file like the one linked above using a plugin? Since I am using PGB, I'd like to do some experiments and override some of the settings. If so: How can this be achieved? Using a resource-file entry in my plugin.xml?

       

      It would be really nice if someone had an idea on how to fix my problem.

      When using google to find a potential solution, most of the time Crosswalk is recommended... This is not what I am really looking for

      My config.xml

       

      <?xml version="1.0" encoding="UTF-8" ?>
      
      <widget <!-- **** (some entries removed) **** -->
      
          <platform name="ios" />
          <platform name="android" />
      
          <preference name="android-minSdkVersion" value="16" />
          <preference name="android-targetSdkVersion" value="21" />
      
          <preference name="BackgroundColor" value="0xffffffff" />
          <preference name='phonegap-version' value='cli-6.5.0' />
          <preference name="android-build-tool" value="gradle" />
      
          <content src="index.html" />
      
          <preference name="DisallowOverscroll" value="true" />
          <preference name="SplashScreenDelay" value="10000" />
          <preference name="SplashMaintainAspectRatio" value="true" />
          <preference name="FadeSplashScreen" value="false" />
          <preference name="ShowSplashScreenSpinner" value="false" />
          <preference name="SplashShowOnlyFirstTime" value="false" />
          <preference name="StatusBarOverlaysWebView" value="true" />
          <preference name="BackupWebStorage" value="none" />
          <preference name="permissions" value="none"/>
      
          <splash src="splash.png" />
          <icon src="ic_launcher.png" />
      
          <!-- **** (some entries removed) **** -->
              
          
          <!-- Theme -->
          <gap:config-file platform="android" parent="/manifest">
              <application android:hardwareAccelerated="true" />
              <supports-screens
                  android:xlargeScreens="true"
                  android:largeScreens="true"
                  android:smallScreens="true" />
              <application android:theme="@style/Theme.Default"></application>
          </gap:config-file>
      
          <!-- Remove some permissions we don't need -->
          <gap:config-file platform="android" parent="/manifest" mode="delete">
              <uses-permission android:name="android.permission.RECORD_AUDIO" />
              <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
              <uses-permission android:name="android.permission.READ_CONTACTS" />
              <uses-permission android:name="android.permission.GET_ACCOUNTS" />
          </gap:config-file>
      
          <!-- **** (some entries removed) **** -->
      
          <!-- Launch mode -->
          <gap:config-file platform="android" parent="/manifest/application">
              <activity android:launchMode="singleTask" />
          </gap:config-file>
      
          <!-- **** (some entries removed) **** -->    
      
          <!-- Plugins -->
          <plugin name="cordova-plugin-intent" source="git" spec="https://github.com/napolitano/cordova-plugin-intent#44c520e0e690331880af468d70a59d7b6d37c0f0" />
          <plugin name="cordova-plugin-whitelist" source="npm" />
          <plugin name="cordova-plugin-device" source="npm" />
          <plugin name="cordova-plugin-file" source="npm" />
          <plugin name="cordova-plugin-file-transfer" source="npm" />
          <plugin name="cordova-plugin-keyboard" source="npm" />
      
          <!-- **** (some entries removed) **** -->
      
          <plugin name="cordova-plugin-inappbrowser" source="npm" />
          <plugin name="cordova-plugin-network-information" source="npm" />
          <plugin name="cordova-plugin-splashscreen" source="npm" />
          <plugin name="cordova-plugin-app-version" source="npm" />
          <plugin name="cordova-plugin-admob" source="npm" />
          <plugin name="cordova-plugin-statusbar" source="npm" />
      
          <plugin name="cordova-plugin-crosswalk-webview" source="npm" spec="2.2.0" />
          <preference name="xwalkMultipleApk" value="true" />
          <plugin name="cordova-build-architecture" spec="https://github.com/MBuchalik/cordova-build-architecture.git#v1.0.1" source="git" />
      
          <plugin name="cordova-plugin-ios-permissions" spec="https://github.com/MBuchalik/cordova-plugin-ios-permissions.git#v1.0.0" source="git" />
      
      </widget>
      
      
        • 1. Re: Performance problems on Android WebView (Chromium) vs. Crosswalk
          kerrishotts Adobe Community Professional

          It's hard to judge responsiveness / performance with the video as presented, so I'm only going to focus on the rendering issues.

           

          First, what framework are you using, and what version? (If any.) It's possible that the framework in use doesn't particularly like your installed version of the Android system webview. If possible, try running the app using Chrome on the device as well, and see if the same problems crop up.

           

          Second, it's entirely possible that what you're seeing is down to hardware rendering. The times I see flickering and glitchy rendering have usually boiled down to hardware rendering being enabled. It's bad enough that there are blacklists out there for various devices so that they can opt out of the hardware rendering. So, my suspicion is that you may indeed be using hardware rendering with the android system webview, and thus seeing rendering problems. As to why Crosswalk doesn't show those issues, it could be that the older version of Chromium didn't encounter those issues OR Crosswalk was using software rendering.

           

          That said, it's moot now what Crosswalk did, since it's EOL. I would definitely try to get things working with the system web view, since you shouldn't rely on Crosswalk going forward. Try your app in a Chrome browser and see if it exhibits the same problems and also let us know what framework you're using (and version).

          • 2. Re: Performance problems on Android WebView (Chromium) vs. Crosswalk
            martinb77004568 Level 2

            Hi Kerri,

             

            thanks for you reply

            The visual elements are based on Materialize 0.97.5 (but many of them have been customized). The app itself (the structure etc.) was built from scratch.

             

            You are right: The same issues occur when running the code in Chrome.

             

            Until now, I always knew that I was able to prototype my app on the local dev machine and the app would simply run smoothly on Android and iOS. So I was hoping that there is maybe a setting like

            <preference name="speedUpWebView" value="yeah|nah"/>
            

             

             

            Does this mean that it is simply not possible to make Android's WebView behave like Crosswalk? (So I have to treat it like a "new" platform?)

             

             

            One thing I tried now was to add css translate to all scrolled elements.

            I did it using sth like this

            #my-scrollable-area * {
                transform: translateZ(0);
            }
            

            (Only applying it to the scrollable area didn't seem to fix the problems so I simply added it to all children.)

             

            This made the rendering issues disappear and the scrolling feel a lot smoother.

             

            Still, I got the feeling that manipulating a large DOM is slower compared to Crosswalk. (Sorry that I keep comparing it to an outdated plugin but I want to make sure the app runs as smoothly as possible... Crosswalk simply doesn't seem to have any performance problems here...)

             

            An example: I have a pretty huge list. I hide this list and show it again. When directly comparing the two apps, you get the feeling that the "new" one takes maybe 50-100 milliseconds more than Crosswalk until the elements are visible again. Could this be related to the amount of elements I have to hardware-accelerate now? A smaller list doesn't seem to be a problem at all but you can see that the more elements it contains, the slower the WebView gets. This is not a huge problem but it would simply make the app feel more "native" if things like that didn't happen. But this is surely not easy for you to answer so I will probably need to find a way to increase the performance myself.

             

            Just to do some experiments: Is it somehow possible to override files like the SystemWebViewEngine.java using a plugin? Maybe, I can find a setting that will boost my app's performance

            • 3. Re: Performance problems on Android WebView (Chromium) vs. Crosswalk
              augmandino

              Hi Martin, thanks for posting this question. I've been noticing the very same problem in my app using Cordova. It used to be smooth as butter with Crosswalk... now it's jittery and practically unusable in the native Chromium.

               

              We're using the now defunct famo.us rendering library, which uses 3D-matrix transforms almost exclusively. So I'm not sure why adding some transforms to your code would improve things much.

               

              The idea that it's due to hardware acceleration is intriguing. Have you tried to disable hardware acceleration in the app manifest?

               

              <application android:hardwareAccelerated="false" ...>

               

              Hardware Acceleration | Android Developers

               

              Havent tried it myself yet, but I will and report back.

              • 4. Re: Performance problems on Android WebView (Chromium) vs. Crosswalk
                martinb77004568 Level 2

                Hi,

                 

                one thing I noticed (only tried it on the Chrome App): Using the will-change property too heavily can dramatically slow down the app. For some reason, Crosswalk seems to ignore the property (maybe if it's used on a large area that would consume too much RAM?). In my example, I have used will-change on all scrolled elements (since they sometimes get transformed as well...). After removing will-change from these elements, the scrolling is way smoother and the app seems to react faster to touch events. Maybe, this could help you as well? Unfortunately, I cannot really test other settings atm. But as far as I can see in the Chrome App, my app now runs smoothly (except for some minor problems that can be ignored).

                • 5. Re: Performance problems on Android WebView (Chromium) vs. Crosswalk
                  augmandino Level 1

                  I tested out turning off hardware acceleration, performance got way worse. Oddly our app was running smoothly in Chrome but not the Chrome Webview. You were on the right track, though, adding

                   

                  will-change: transform;

                   

                  CSS property to the body tag totally fixed our issues. Our app now runs just as smoothly in the WebView.