Flutter与Android 原生WebView比拟

媒介

自从 google 推出 flutter 跨平台开拓框架以来，flutter 在各个技能论坛里被炒得方兴未艾。

说到跨平台开拓，就不得不提 WebView，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: flutter 
  flutter_webview_plugin: ^0.3.0+2 

接下来全部的比拟都是基于 Android 原生的 WebView 和 flutter_webview_plugin 插件，为了严谨，并未对第三方 WebView 作比拟。

测试手机：小米8SE 体系：Android 8.1.0

加载速率比拟

测试网页打开的速率，只必要获取 WebView 在开始加载网页和网页加载完成时的时刻戳，时刻戳的差即为打开网页的时刻，我们别离在 Android 原生和 flutter 中的响应位置打印 log：

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) 
    } 
} 
复制代码 
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; 
    }); 
  } 
}); 

为了使差别更明明，我们选择较为伟大的 新浪首页 举办加载的比拟，为了减小收集对加载速率的影响，我们让手机毗连统一个收集，别离举办 10 次测试然后取均匀值，其它，我们必要封锁 WebView 的缓存，防备缓存对加载速率发生影响：

webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE 

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

下面使笔者举办 10 次测试所获得的数据：

可以发明，沟通情形下 flutter_webview_plugin 的加载速率比 native WebView 略快，可是差别不明明，根基可以忽略。

结论：flutter_webview_plugin 的加载速率比 native WebView 略快。

内存占用比拟

可以行使 AndroidStudio 自带的 profiler 器材来举办占用内存的测试，我们在 flutter 措施中同时集成挪用 native WebView 和 flutter_webview_plugin 来打开淘宝首页和新浪首页的要领，在措施刚运行的时辰内存占用如下图：

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!