Comparison between Flutter and Android native WebView

Preface

Since Google launched the flutter cross-platform development framework, flutter has been very popular in various technical forums.

When it comes to cross-platform development, WebView must be mentioned. WebView can be said to be the cheapest cross-platform development solution. We know that flutter can be mixed with native development, and they can call each other. So when we do mixed development, if we need to use WebView, should we call the native WebView or use flutter to implement WebView? If we use flutter to implement WebView, how does its performance compare to native? Today we will take Android as an example to actually test it from several different dimensions!

[[265159]]

Flutter implements WebView

Flutter does not officially have a WebView component, but the powerful flutter-community forum has developed the flutter_webview_plugin plug-in to facilitate the use of WebView in flutter, taking into account the needs of the majority of developers.

The integration is simple, in the pubspec.yaml file:

 dependencies:
 flutter:
 sdk: flutter
  flutter_webview_plugin: ^0.3.0+2

All the following comparisons are based on Android's native WebView and the flutter_webview_plugin plug-in. For the sake of rigor, no comparison is made with third-party WebView.

Test phone: Xiaomi 8SE System: Android 8.1.0

Loading speed comparison

To test the speed of opening a web page, you only need to get the timestamps when WebView starts loading the web page and when the web page is loaded. The difference between the timestamps is the time it takes to open the web page. We print logs at the corresponding locations in Android native and flutter respectively:

 webView?.webViewClient = object : WebViewClient() {
    override fun onPageStarted( view : WebView?, url: String?, favicon: Bitmap?) {
        Log.d(TAG, "onPageStarted:" + System.currentTimeMillis())
        super.onPageStarted( view , url, favicon)
 }
    override fun onPageFinished( view : WebView?, url: String?) {
        Log.d(TAG, "onPageFinished:" + System.currentTimeMillis())
        super.onPageFinished( view , url)
 }
 }
 Copy code
 flutterWebViewPlugin.onStateChanged.listen((state) {
  if (state.type == WebViewState.finishLoad) {
    print( 'finishLoad:' + DateTime.now().millisecondsSinceEpoch.toString());
 setState(() {
 isLoad = false ;
 });
  } else if (state.type == WebViewState.startLoad) {
    print( 'startLoad:' + DateTime.now().millisecondsSinceEpoch.toString());
 setState(() {
 isLoad = true ;
 });
 }
 });

To make the difference more obvious, we chose the more complex Sina homepage for loading comparison. To reduce the impact of the network on the loading speed, we connected the phone to the same network, performed 10 tests and then took the average value. In addition, we need to turn off the WebView cache to prevent the cache from affecting the loading speed:

 webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE

 WebviewScaffold
 key : _scaffoldKey,
 url: widget.url,
 clearCache: true ,
 appCacheEnabled: false ,
 .
 .
 .
 );

The following is the data obtained by the author after 10 tests:

It can be found that the loading speed of flutter_webview_plugin is slightly faster than that of native WebView in the same environment, but the difference is not obvious and can be basically ignored.

Conclusion: flutter_webview_plugin loads slightly faster than native WebView.

Memory usage comparison

You can use the profiler tool that comes with AndroidStudio to test memory usage. We integrate the method of calling native WebView and flutter_webview_plugin in the flutter program to open the Taobao homepage and Sina homepage. When the program is just running, the memory usage is as follows:

Then use WebView to open the Taobao homepage:

Use flutter_webview_plugin to open the Taobao homepage:

It can be found that the memory usage of Taobao homepage opened with WebView is basically unchanged, but the memory usage of Taobao homepage opened with flutter_webview_plugin increases significantly, and the fluctuation is large.

Conclusion: flutter_webview_plugin occupies more memory than native WebView.

HTML5 compatibility comparison

You can score the browser compatibility in html5test. The test found that the scores of native WebView and flutter_webview_plugin are as follows:

Now on Xiaomi 8SE mobile phone, the HTML5 compatibility scores of native WebView and flutter_webview_plugin are both 501.

Conclusion: There is no significant difference in HTML5 compatibility between native WebView and flutter_webview_plugin.

Summarize

We compared native WebView and flutter_webview_plugin in terms of web page loading speed, memory usage, and HTML5 compatibility, and found that native WebView occupies less memory, and there is no significant difference in web page loading speed and HTML5 compatibility.

In actual use, since flutter_webview_plugin does not exist in the widget tree, notification interaction widgets such as snackbars, dialogs, etc. cannot be used in flutter_webview_plugin. However, flutter_webview_plugin has the advantage of being cross-platform. If you need to use WebView on both Android and iOS in a flutter project, it is recommended to use flutter_webview_plugin. Otherwise, it is recommended to use native WebView.

I hope everyone will actively discuss, exchange your valuable experiences, and improve each other!