前言自从谷歌推出flutter跨平台开发框架以来，flutter就在各个技术论坛上大肆炒作。说到跨平台开发，就不得不提WebView，它可以说是最便宜的跨平台开发方案。我们知道flutter和native可以混合开发，可以相互调用。那么我们在做混合开发的时候，如果需要使用WebView，是调用原生的WebView还是使用flutter自己实现WebView呢？如果我们用flutter自己实现WebView，它的性能和native相比如何？今天我们就以android为例，从几个不同的维度来实际测试一下！Flutter实现了WebView。Flutter官方没有WebView组件，但是强大的flutter-community论坛考虑到开发者的需求，开发了flutter_webview_plugin插件，方便在flutter中使用WebView。.集成方法非常简单。pubspec.yaml文件中：dependencies:flutter:sdk:flutterflutter_webview_plugin:^0.3.0+2后面的所有对比都是基于Android原生的WebView和flutter_webview_plugin插件。为了严谨起见，没有第三方WebView进行对比。测试手机：小米8SE系统：Android8.1.0Loadingspeed对比测试网页打开速度，只需要获取WebView开始加载网页时的时间戳和网页加载完成时的时间戳之差即为打开网页的时间webview?.webViewClient=object:WebViewClient(){overridefunonPageStarted(view:WebView?,url:String?,favicon:Bitmap?){Log.d(TAG,"onPageStarted:"+System.currentTimeMillis())super.onPageStarted(view,url,favicon)}overridefunonPageFinished(view:WebView?,url:String?){Log.d(TAG,"onPageFinished:"+System.currentTimeMillis())super.onPageFinished(view,url)}}复制代码flutterWebViewPlugin.onStateChanged.listen((state){if(state.type==WebViewState.finishLoad){print('finishLoad:'+DateTime.now().millisecondsSinceEpoch.toString());setState((){isLoad=false;});}elseif(state.type==WebViewState.startLoad){print('startLoad:'+DateTime.now().millisecondsSinceEpoch.toString());setState((){isLoad=true;});}});为了让差异更加明显，我们选择比较复杂的新浪首页进行加载对比。为了减少网络对加载速度的影响，我们将手机连接到同一网络。分别进行10次试验，取平均值。另外我们需要关闭WebView的缓存，防止缓存影响加载速度：webView?.s设置?.cacheMode=WebSettings.LOAD_NO_CACHEWebviewScaffold(key:_scaffoldKey,url:widget.url,clearCache:true,appCacheEnabled:false,...);以下是笔者10次测试得到的数据：可以发现，在相同环境下，flutter_webview_plugin的加载速度比原生WebView略快，但差异并不明显，基本可以忽略。结论：flutter_webview_plugin加载速度比原生WebView略快。内存占用对比可以使用AndroidStudio自带的profiler工具来测试内存占用。我们在flutter程序中集成了原生的WebView和flutter_webview_plugin来打开淘宝首页和新浪首页。程序刚运行时内存占用如下：然后用WebView打开淘宝首页：用flutter_webview_plugin打开淘宝首页：可以发现用WebView打开淘宝首页内存基本没有变化，但是内存用flutter_webview_plugin打开的淘宝首页的数量明显增加，波动较大。结论：flutter_webview_plugin相比原生的WebView占用内存大。HTML5兼容性比较您可以在html5test中对浏览器的兼容性进行评分。通过测试，nativeWebView和flutter_webview_plugin的得分如下：现在在小米8SE手机上，nativeWebView和flutter_webview_plugin的html5兼容性得分都是501。结论：nativeWebView和flutter_webview_plugin的html5兼容性没有明显区别flutter_webview_plugin。综上所述，我们对比了原生WebView和flutter_webview_plugin的网页加载速度、内存占用和html5兼容性，发现原生WebView占用内存更少，网页加载速度和html5兼容性没有明显差异。在实际使用中，由于widget树中不存在flutter_webview_plugin，所以不能在flutter_webview_plugin中使用snackbars、dialogs...等通知交互widget。但是，flutter_webview_plugin具有跨平台的优势。如果在flutter项目中需要同时在Android和iOS上使用WebView，建议使用flutter_webview_plugin，否则建议使用原生WebView。希望大家积极讨论，分享自己的宝贵经验，互相提高！
