什么是 WebView

WebView 是手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装的一个组件。没有提供地址栏和导航栏, WebView 只是单纯的展示一个网页界面。在开发中经常都会用到。

ps: 关于 WebView 的介绍,可以看这里 《谈谈 WebView 的使用》

虽说 WebView 是安卓开发中设计的东西,但是作为一个前端开发人员,关注一些相关的东西还是有必要的.

性能的问题

WebView 是原生 APP 开发中的底层 SDK ,必然有性能上的问题,最直观的感受是比原生的要慢.

APP 在打开一个页面时,有以下的阶段.

  1. WebView 初始化 ( 页面无反应 )
  2. 建立连接,接收数据,数据初始化 ( 页面无反应 -- 空白 )
  3. 页面渲染,页面 loading 中 ( 页面 loading )
  4. 显示页面 ( 页面展示 )

如图:

WebView 初始化

APP 加载网页与浏览器加载是有区别的,浏览器第一次打开,启动的是浏览器内核,而 APP 首次加载网页,首先是创建 WebView 实例.

分析

APPWebView 初始化期间,大致会分成以下的过程

首次初始化: 客户端冷启动后,第一次打开 WebView ,从开始创建 WebView 到开始建立网络连接.

二次初始化: 在打开过 WebView 后,退出 WebView ,再重新打开.

结论

作为前端开发工程师,统计页面的打开时间,是以网络连接开始作为起点的.但是

WebView 中用户感受到的打开时间会多 70~700ms.

之所以会有这样的结果,原因在于:

  1. 在浏览器中,我们输入地址时(甚至在之前),浏览器就可以开始加载页面。
  2. 而在客户端中,客户端需要先花费时间初始化 WebView 完成后,才开始加载。

而这段时间,由于 WebView 还不存在,所有后续的过程是完全阻塞的。

优化

由于这段过程发生在 native 的代码中,单纯靠前端代码是无法优化的;大部分的方案都是前端和客户端协作完成,以下是几个业界采用过的方案。

全局 WebView

方法:

在客户端刚启动时,就初始化一个全局的 WebView 待用,并隐藏;

当用户访问了 WebView 时,直接使用这个 WebView 加载对应网页,并展示。

这种方法可以比较有效的减少 WebViewApp 中的首次打开时间。当用户访问页面时,不需要初始化 WebView 的时间。

当然这也带来了一些问题,包括:
  • 额外的内存消耗。
  • 页面间跳转需要清空上一个页面的痕迹,更容易内存泄露。

【参考东软专利 - 加载网页的方法及装置 CN106250434A

客户端代理数据请求

方法:
  • 在客户端初始化 WebView 的同时,直接由 native 开始网络请求数据;
  • 当页面初始化完成后,向 native 获取其代理请求的数据。

此方法虽然不能减小 WebView 初始化时间,但数据请求和 WebView 初始化可以并行进行,总体的页面加载时间就缩短了;缩短总体的页面加载时间:

【参考腾讯分享:70%以上业务由H5开发,手机QQ Hybrid 的架构如何优化演进?

还有其他各种优化的方式,不再一一列举,总结起来都是围绕两点:

  1. 在使用前预先初始化好 WebView ,从而减小耗时。
  2. 在初始化的同时,通过 Native 来完成一些网络请求等过程,使得 WebView 初始化不是完全的阻塞后续过程。

WebView 性能优化总结

一个加载网页的过程中,native 、网络、后端处理、CPU都会参与,各自都有必要的工作和依赖关系;让他们相互并行处理而不是相互阻塞才可以让网页加载更快:

  • WebView 初始化慢,可以在初始化同时先请求数据,让后端和网络不要闲着。
  • 后端处理慢,可以让服务器分 trunk 输出,在后端计算的同时前端也加载网络静态资源。
  • 脚本执行慢,就让脚本在最后运行,不阻塞页面解析。
  • 同时,合理的预加载、预缓存可以让加载速度的瓶颈更小。
  • WebView 初始化慢,就随时初始化好一个 WebView 待用。
  • DNS 和链接慢,想办法复用客户端使用的域名和链接。
  • 脚本执行慢,可以把框架代码拆分出来,在请求页面之前就执行好。

前端开发中需要了解的关于 WebView 的内容不需要太多,以上基本了解大致的一个过程我个人觉得就足够了,当然关于 WebView 内容不止这些.

文章转载自: 美团点评技术团队 WebView性能、体验分析与优化

关于 WebView 的一些笔记的更多相关文章

  1. WebView随学笔记

    对于WebView而言我们需要掌握的内容是: /** 学习目标:webView * 1).将WebView加入到应用中 * 2).使用WebView加载页面 * 3).获取网络访问 * 4).在Web ...

  2. Android5.1 WebView遇坑笔记-Resources$NotFoundException

    Bugly遇到异常 查找原因,分析发现崩溃发生在Android版本21和22上,在网上查找资料发现下面解决方案 使用自定义WebView替换原生自带WebView解决 package com.test ...

  3. (转载)android控件之WebView控件缩小

    android控件之WebView控件缩小 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-16我要评论 发现这个控件挺好用,能自已控制进度条,而且这个控件的功能非常壮大,先上个简单的 ...

  4. iOS攻城狮修炼之路

    自己总结的学习iOS的笔记,打造一个全面的知识体系,iOS攻城狮修炼之路[持续更新中] iOS学习笔记01-APP相关 iOS学习笔记02-UIScrollView iOS学习笔记03-UITable ...

  5. 【WP8.1】WebView笔记

    之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...

  6. Xamarin开发笔记—WebView双项事件调用

    1.Xamarin调用WebView: 原理:Xamarin.Forms WebView内置方法xx.Eval(..)可以调用到页面里面的js函数. WebView展示的代码如下: var htmlS ...

  7. 安卓开发笔记——WebView组件

    我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...

  8. Android学习笔记50:使用WebView控件浏览网页

    在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...

  9. Android开发学习笔记:浅谈WebView(转)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 ...

随机推荐

  1. Java 学习(6):java Number & Math & String & 数组...常用类型

    目录 --- Number & Math类 --- Character 类 --- String 类 --- StringBuffer 类 --- 数组 Number & Math类: ...

  2. [K/3Cloud]如何解决K3Cloud 2.0审批流提交时报“队列不存在,或您没有足够的权限执行该操……

    按照图上的操作即可解决不可提交的问题,但如果应用服务器是部署在域环境下,应该不会出错,这是微软support上说的

  3. objective-c 通告

    1. 通告和委托的区别 通告也能传递与事件相关的数据.通告不同于委托的地方在于,通告是在对象执行完成动作之后产生,而不是之前.受到通告的对象没有机会建议是否要执行动作,而且对象的通告可以有多个监听者( ...

  4. 临时起异,要进入C++领域耍一个程序

    没办法.两周之内可以搞定吧. 就一个SESSION 0的问题. 网上有类似源码,调一下应该就可以吧..保佑顺利. 基本语法都还记得,快N年啦... #include <iostream> ...

  5. STL源码剖析 学习笔记 MiniSTL

    https://github.com/joeyleeeeeee97 目录: 第二章 空间适配器 第三章 迭代器 第四章 序列式容器(vector,list,deque,stack,heap,prior ...

  6. wait、notify应用场景(生产者-消费者模式)

    Java实现生产者消费者的方式有:wait && notify.BlockingQueue.Lock && Condition等 wait.notify注意事项:(1) ...

  7. [BZOJ1096][ZJOI2007]仓库建设(斜率优化DP)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1096 分析: 假设1~10,如果在3 6 10建立仓库,那么当前建立仓库决策下的最优值 ...

  8. Android GIS开发系列-- 入门季(2) MapView与图层介绍

    一.MapView MapView是Arcgis中的最基本的类,与高德地图SDK的MapView的重要性一样.MapView的创建有两种方法,一种是在Layout文件中直接写控件.一种是实例化,Map ...

  9. 3.5 在批处理模式下使用mysql

    在前面的章节中,你交互式地使用mysql输入查询而且查看结果.你也能够以批模式执行mysql.为了做到这些.把你想要执行的命令放在一个文件里,然后告诉mysql从文件读取它的输入: shell> ...

  10. MySQL中採用类型varchar(20)和varchar(255)对性能上的影响

    1.MySQL建立索引时假设没有限制索引的大小,索引长度会默认採用的该字段的长度.也就是说varchar(20)和varchar(255)相应的索引长度分别为20*3(utf-8)(+2+1),255 ...