专栏首页iOS开发干货分享Flutter 与 iOS 原生 WebView 对比

Flutter 与 iOS 原生 WebView 对比

原文作者:享物说 https://juejin.im/post/5c778d86e51d4506304ee348

本文对比的是 UIWebView、WKWebView、flutter_webview_plugin(在 iOS 中使用的是 WKWebView)的加载速度,内存使用情况。

测试手机:iPhoneX 系统:iOS12.0

加载速度对比

测试网页打开的速度,只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳,时间戳的差即为打开网页的时间。

WKWebView

extension WKWebViewVC: WKNavigationDelegate {
    public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {        decisionHandler(.allow)    }
    public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {        startTime = Int(Date().timeIntervalSince1970 * 1000)    }
    public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {        let finishTime: Int = Int(Date().timeIntervalSince1970 * 1000)        print("WKWebView \(finishTime - startTime)")    }}

UIWebView

extension WebViewVC: UIWebViewDelegate {
    public func webViewDidStartLoad(_ webView: UIWebView) {        startTime = Int(Date().timeIntervalSince1970 * 1000)    }
    public func webViewDidFinishLoad(_ webView: UIWebView) {        let finishTime: Int = Int(Date().timeIntervalSince1970 * 1000)        print("UIWebView \(finishTime - startTime)")    }}

flutter_webview_plugin

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 的缓存,防止缓存对加载速度产生影响:

private func delegateCache() {    let cache = URLCache.shared    cache.removeAllCachedResponses()    cache.diskCapacity = 0    cache.memoryCapacity = 0}
private func deleteWebCache() {    let websiteDataTypes: Set<String> = WKWebsiteDataStore.allWebsiteDataTypes()    let dateFrom = Date.init(timeIntervalSince1970: 0)    WKWebsiteDataStore.default().removeData(ofTypes: websiteDataTypes, modifiedSince: dateFrom) {
    }}
WebviewScaffold(    key: _scaffoldKey,    url: widget.url,    clearCache: true,    appCacheEnabled: false,    .    .    .);

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

结果让我有点惊讶,一直以为 WKWebView 会是个王者。结果看,速度上 WKWebView 略慢一点,不过总体差异不大(该结果仅仅是测试新浪的结果,仅供参考啦)。

在这里,笔者又加了一个测试,尝试记录从 viewController 的 viewDidLoad 到 webview 的 didFinish 时间,测试了新浪的数据,如下:

UIWebViewA: 4970、3808、3815、4250、3556 avg(4079.8) (加载完所有页面) UIWebViewB: 4103、3124、3070、3256、2835 avg(3277.6)(加载sina完毕) WKWebView: 3672、3032、2892、2912、2739 avg(3049.4) flutter_webView: 4532、3901、4310、3496、3378 avg(3923.4)

其中可以看到,webView 有两行,UIWebViewB 的数据就是加载 sina 主站的时间;UIWebViewA 的数据是因为在加载完 sina 主站之后,新浪又加载了一个https://r.dmp.sina.cn/cm/sinaads_ck_wap.html,所以导致总时间延长,不过即使按照 UIWebViewB 的数据来比较,也是 wkWebView 略胜一筹。

此处可以看出 flutter_webView 使用的是 wkwebView,所以它吃亏的主要原因是 flutter 包了一层。

结论: 速度(didStart -> didFinish) UIWebView > flutter_webview > WKWebView 速度(viewDidLoad -> didFinish)WKWebView > UIWebView > flutter_webview

占用内存对比

这里查看内存使用的是 Xcode 的 debug session 中的 memory,首先看之前测试时,连续打开十次新浪的内存情况:

接着我们在看一下打开淘宝首页的内存情况

从图上可以看出,WKWebView 在内存方面有很大的优势啊,UIWebView 的内存是真的伤啊,然后 debug 看了一下 flutter_webView,他使用的就是原生的 webView。

他相比较原生 WKWebView 的内存开销稍大一点,从测试表现来看,一般大个 30 MB 左右。

结论:内存 WKWebView > flutter_webview > UIWebView

HTML5 兼容性对比

可以在 html5test 中对浏览器的兼容性进行评分,通过测试发现得分分别如下:

因为 flutter 里使用的就是 WK,所以和原生的 WKWebView 一样都是 444 分,比 UIWebView 的 437 略胜一筹。

结论:兼容性 WKWebView = flutter_webview > UIWebView

总结

  • UIWebView: 速度相比较 WKWebView 稍快一点,但是内存是一大硬伤,所以只要条件允许,就不推荐使用了;
  • WKWebView: 速度略慢一点,不过差别不大,总体可以接受。是比UIWebView更好的选择,推荐使用;
  • flutter_webView_plugin:在iOS中使用的就是原生的WKWebView,所以总体和 native WKWebView 表现差不多。如果是混编项目中,因为它被包了一层,所以页面加载上存在一定的劣势,所以混编项目中仍然推荐使用 WKWebView。不过如果从多端考虑、以及项目可迁移等,那么使用也未尝不可,就是维护成本要增加一些,需要维护两套 webView。这个就需要根据自己的情况自己取舍了。

本文分享自微信公众号 - iOSSir(iOSSir),作者:享物说

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS面向切面的TableView-AOPTableView

    这个是公司很久之前的开源项目,一个大牛写的,在项目中一直有在用,今天有空发了点时间看下如何实现,看了之后感觉挺有收获,故撰此文,分享给需要的同学。

    iOSSir
  • AVFoundation 文本转语音和音频录制 播放

    现在你应该对AVFoundation有了比较深入的了解,并且对数字媒体的细节也有了一定认识,下面介绍一下 AVFoundation的文本转语音功能

    iOSSir
  • iOS内存不够怎么办?-底层原理

    https://juejin.im/post/5ccd6bb3e51d453a5604c42e”

    iOSSir
  • 技术 | Hybrid载体的变化(一)

    时至今日,我都在想“微信小程序”为什么不能做成Web式,而是要去加那么一层隔离,终归其原因,还是随着时间向前走,Hybrid的载体也发生了变化,不然该卡的还是一...

    icepy
  • 直播卖货系统源码中,如何展示html格式的商品详情

    在开发iOS版的直播卖货系统源码过程中,如何在html上展示商品详情,下面小编将从WKWebView入手,来介绍下实现过程。

    万岳教育系统
  • JVM(三)对象的生死判定和算法详解

    导读:对象除了生死之外,还有其他状态吗?对象真正的死亡,难道只经历一次简单的判定?如何在垂死的边缘“拯救”一个将死对象?判断对象的生死存活都有那些算法?本文带你...

    Java中文社群_老王
  • 当iOS的webView加载Html页面之后

    写到webView这块,硬生生堵了好久。现将问题记录如下。 问题一:加载webView之后浏览网页,有时程序会莫名其妙奔溃,查看内存居然高达上百兆。查阅网上资料...

    谦谦君子修罗刀
  • TIOBE 7 月编程语言榜:TypeScript 进入前 50 名

    TIOBE 7 月编程语言指数排行榜已经公布了,本月主角还是 TypeScript。

    用户1272076
  • 安利一下WebView内存泄漏的方法

    Xiaolei123
  • 微软75亿收购Github,微软以开发者为中心的初心不变

    张善友

扫码关注云+社区

领取腾讯云代金券