2 Replies Latest reply on Jul 19, 2017 1:55 AM by martinb77004568

    Performance problems on Android WebView (Chromium) vs. Crosswalk

    martinb77004568 Level 1

      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 1

            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