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 文件中： 

 
 
 
 
    
  
  
  
  
  1. dependencies: 
    2. 
  
  
  
  
  2.   flutter: 
    3. 
  
  
  
  
  3.     sdk: flutter 
    4. 
  
  
  
  
  4.   flutter_webview_plugin: ^0.3.0+2 
    5.

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

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

加载速度对比

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

 
 
 
 
    
  
  
  
  
  1. webView?.webViewClient = object : WebViewClient() { 
    2. 
  
  
  
  
  2.     override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) { 
    3. 
  
  
  
  
  3.         Log.d(TAG, "onPageStarted:" + System.currentTimeMillis()) 
    4. 
  
  
  
  
  4.         super.onPageStarted(view, url, favicon) 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     override fun onPageFinished(view: WebView?, url: String?) { 
    7. 
  
  
  
  
  7.         Log.d(TAG, "onPageFinished:" + System.currentTimeMillis()) 
    8. 
  
  
  
  
  8.         super.onPageFinished(view, url) 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. 复制代码 
    12. 
  
  
  
  
  12. flutterWebViewPlugin.onStateChanged.listen((state) { 
    13. 
  
  
  
  
  13.   if (state.type == WebViewState.finishLoad) { 
    14. 
  
  
  
  
  14.     print('finishLoad:' + DateTime.now().millisecondsSinceEpoch.toString()); 
    15. 
  
  
  
  
  15.     setState(() { 
    16. 
  
  
  
  
  16.       isLoad = false; 
    17. 
  
  
  
  
  17.     }); 
    18. 
  
  
  
  
  18.   } else if (state.type == WebViewState.startLoad) { 
    19. 
  
  
  
  
  19.     print('startLoad:' + DateTime.now().millisecondsSinceEpoch.toString()); 
    20. 
  
  
  
  
  20.     setState(() { 
    21. 
  
  
  
  
  21.       isLoad = true; 
    22. 
  
  
  
  
  22.     }); 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24. }); 
    25.

为了使差异更明显，我们选择较为复杂的 新浪首页 进行加载的对比，为了减小网络对加载速度的影响，我们让手机连接同一个网络，分别进行 10 次测试然后取平均值，另外，我们需要关闭 WebView 的缓存，防止缓存对加载速度产生影响： 

 
 
 
 
    
  
  
  
  
  1. webView?.settings?.cacheMode = WebSettings.LOAD_NO_CACHE 
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. WebviewScaffold( 
    2. 
  
  
  
  
  2.   key: _scaffoldKey, 
    3. 
  
  
  
  
  3.   url: widget.url, 
    4. 
  
  
  
  
  4.   clearCache: true, 
    5. 
  
  
  
  
  5.   appCacheEnabled: false, 
    6. 
  
  
  
  
  6.   . 
    7. 
  
  
  
  
  7.   . 
    8. 
  
  
  
  
  8.   . 
    9. 
  
  
  
  
  9. ); 
    10.

下面使笔者进行 10 次测试所得到的数据：

可以发现，相同环境下 flutter_webview_plugin 的加载速度比 native WebView 略快，但是差异不明显，基本可以忽略。

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

内存占用对比

可以使用 AndroidStudio 自带的 profiler 工具来进行占用内存的测试，我们在 flutter 程序中同时集成调用 native WebView 和 flutter_webview_plugin 来打开淘宝首页和新浪首页的方法，在程序刚运行的时候内存占用如下图：

然后用 WebView 打开淘宝首页：

用 flutter_webview_plugin 打开淘宝首页：

可以发现，用 WebView 打开淘宝首页内存基本无变化，但是用 flutter_webview_plugin 打开淘宝首页内存有明显的增加，且波动较大。

结论：flutter_webview_plugin 相对 native WebView 而言，占用内存较大。

HTML5 兼容性对比

可以在 html5test 中对浏览器的兼容性进行评分，通过测试发现 native WebView 和 flutter_webview_plugin 的得分分别如下：

现在小米8SE手机上，native WebView 和 flutter_webview_plugin 的 html5 兼容性得分都是 501。

结论：native WebView 和 flutter_webview_plugin 的 html5 兼容性无明显差异。

总结

我们对 native WebView 和 flutter_webview_plugin 分别进行了网页加载速度、占用内存和 html5 兼容性作了对比，发现 native WebView 占用内存更小，网页加载速度和 html5 的兼容性无明显差异。

在实际使用中，由于 flutter_webview_plugin 并不存在于 widget 树中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...这些通知交互 widget。但是 flutter_webview_plugin 具有跨平台的优势，如果需要同时 flutter 项目中同时在 Android 和 iOS 端使用 WebView，建议使用 flutter_webview_plugin，否则，建议使用 native WebView。

希望大家踊跃讨论，交流一下你们的宝贵经验，互相提高下!

文章题目：Flutter与Android原生WebView对比
标题来源：http://www.shufengxianlan.com/qtweb/news31/276031.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

同城分类信息

温江网站建设　　 　成都机柜租用　　 　重庆网站营销　　 　成都品牌网站建设　　 　乐山中领科信　　 　成都网站推广公司　　 　成都网站建设推广　　 　自适应网页设计　　 　成都电商网站建设方案　　 　成都花箱厂家　　 　泸州网站建设　　 　网站运营　　 　服务器机柜　　 　温江电信机房　　 　企业网站设计　　 　云锦斋建筑　　 　绵竹网站建设　　 　成都网站制作公司　　 　眉山电信机房　　 　雷运建站