Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of Flutter and Android native WebView test analysis, the content is detailed and easy to understand, easy to operate, and has a certain reference value. I believe you will gain something after reading this Flutter and Android native WebView test analysis article. Let's take a look.

Implementing WebView with Flutter

Flutter officially does not have WebView components, but the powerful flutter-community forum takes into account the needs of developers and develops flutter_webview_plugin plug-ins to facilitate the use of WebView in flutter.

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

Dependencies: flutter: sdk: flutter flutter_webview_plugin: ^ 0.3.0room2

All of the following comparisons are based on Android's native WebView and flutter_webview_plugin plug-ins, and for the sake of rigor, there is no comparison of 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 obtain the timestamp of the WebView when the page starts loading and when the page is loaded. The difference in the timestamp is the time when the page is opened. We print the log in the corresponding locations in the native Android 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;});}})

In order to make the difference more obvious, we choose the more complex Sina home page to load and compare. In order to reduce the impact of the network on the loading speed, we connect the mobile phone to the same network, conduct 10 tests respectively, and then take the average. In addition, we need to turn off the cache of WebView to prevent the cache from affecting the loading speed:

WebView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHEWebviewScaffold (key: _ scaffoldKey, url: widget.url, clearCache: true, appCacheEnabled: false,. . . );

The following is the data obtained by the author from 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 ignored.

Conclusion: the loading speed of flutter_webview_plugin is slightly faster than that of native WebView.

Memory footprint comparison

You can use the profiler tool that comes with AndroidStudio to test the memory consumption. We integrate the method of calling native WebView and flutter_webview_plugin in the flutter program to open Taobao home page and Sina home page. The memory footprint is shown below when the program is just running:

Then open the home page of Taobao with WebView:

Open the home page of Taobao with flutter_webview_plugin:

It can be found that using WebView to open Taobao home memory is basically unchanged, but using flutter_webview_plugin to open Taobao home memory has a significant increase, and fluctuates greatly.

Conclusion: compared with native WebView, flutter_webview_plugin takes up more memory.

HTML5 compatibility comparison

Browser compatibility can be scored in html5test, and tests show that the scores of native WebView and flutter_webview_plugin are as follows:

Now on Xiaomi's 8SE phone, both native WebView and flutter_webview_plugin have a html5 compatibility score of 501.

Conclusion: there is no significant difference in html5 compatibility between native WebView and flutter_webview_plugin.

This is the end of the article on "Flutter and Android Native WebView Test Analysis". Thank you for reading! I believe you all have some knowledge of "Flutter and Android native WebView test analysis". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.