什么是Web View？

2021年04月14日 14:04 ·  阅读 4044

1、定义

webview是原生系统，用于用于移动端 APP 嵌入(Embed) Web 技术，方式是内置了一款高性能webkit内核浏览器。

一般会在SDK中封装为一个叫做WebView组件。

2、类别

安卓（Android）：SDK 中有WebView控件；

苹果（IOS，MacOS）：WebView/UIWebView/WKWebView(UIView/NSView)；。

3、功能

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

3、如何与App native的交互？

1.JSBridge

• 在IOS中，主要使用WebViewJavascriptBridge来注册
• 在Android中，需要通过addJavascriptInterface来注册

2.schema

4、微信小程序中的webview

小程序的主要开发语言是 JavaScript ，小程序中，逻辑层和渲染层是分开的，分别运行在不同的线程中。 具体的运行环境如下：

可以看出，小程序的渲染层也是运行在webview上的；

5、为什么webview会很慢？

普通用户访问webview经历过程如下：

1. 交互无反馈
2. 到达新的页面，页面白屏
3. 页面基本框架出现，但是没有数据；页面处于loading状态
4. 出现所需的数据

于是，做了测试结果如下

说明

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

6、如何避免webview加载慢？

1. 全局WebView

在客户端刚启动时，就初始化一个全局的WebView待用，并隐藏； 当用户访问了WebView时，直接使用这个WebView加载对应网页，并展示

1. 客户端代理数据请求

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

7、webview的性能优化

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

8、webview 和原生Native如何选择？

在内嵌的WebView中应该限制允许打开的WebView的域名，并设置运行访问的白名单。或者当用户打开外部链接前给用户强烈而明显的提示。

在一个客户端内，native目前主要功能是提供高效而基础的功能；内部的WebView则添加一些性能体验要求不高但动态化要求高的能力。

提高客户端的动态能力，或者提高WebView的性能，都是提升App功能覆盖的方式。

而目前的各种框架，ReactNative、Week包括微信小程序，都是这个趋势的尝试。

参考链接

• developer.android.com/reference/a…
• developer.apple.com/documentati…
• developers.weixin.qq.com/miniprogram…
• zhuanlan.zhihu.com/p/58691238

写在最后

推荐一套TS全系列的教程吧。近期在提升TS，收藏了一套很不错的教程，无偿分享给大家 www.yidengxuetang.com/pub-page/in…

2020年12月09日 18:58 ·  阅读 2307

• webview是一个基于webkit的引擎,可以解析dom元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待(chrome浏览器也是基于webkit引擎开发的,Mozilla 火狐浏览器是基于Gecko开发的)

• webview主要用于什么地方? 或者说什么需求下会使用到webview?

  • 例如电脑上展示html页面,通过浏览器打开页面即可浏览.而系统层面,如果没有webview支持,是无法展示html页面的,所以webview的作用即是用于手机系统来展示html界面的

• 一个原生应用调用html页面的过程?

  • 原生应用加载html页面(加载页面的方式可能有很多种,比如加载贝蒂写好的html文件,或者放置服务器的文件)

  • 加载完成,展示就是通过webview来渲染展示的,如果系统没有wenview,是无法展示html的

    页面不光展示,有时候还需要交互,比如html界面的按钮需要调用系统原生的东西(比如:拍照,系统的文件,相册之类的)原生端负责维护html调用的接口,然后按照需要返回(原生端充当一个server的角色,html充当一个client的角色)

• 使用webview的好处?

  • 当需要更新页面布局负责业务逻辑发生变更时,如果是原生的APP就需要修改前端内容,升级打包,重新发布才可以使用最新的

  • 而通过webview的方式只需要修改html代码或者js文件(如果是从服务端获取,只需要新的文件部署完成)用户重新刷新后就可以使用更新后的,无需通过下载安装的方式完成升级.