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 ，小程序中，逻辑层和渲染层是分开的，分别运行在不同的线程中。 具体的运行环境如下：
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chromium定制内核 |
| 小程序开发者工具 | NWJS | Chrome WebView |
可以看出，小程序的渲染层也是运行在webview上的；
5、为什么webview会很慢？
普通用户访问webview经历过程如下：
- 交互无反馈
- 到达新的页面，页面白屏
- 页面基本框架出现，但是没有数据；页面处于loading状态
- 出现所需的数据
于是，做了测试结果如下
说明
在浏览器中，我们输入地址时（甚至在之前），浏览器就可以开始加载页面。 而在客户端中，客户端需要先花费时间初始化WebView完成后，才开始加载。
6、如何避免webview加载慢？
- 全局WebView
在客户端刚启动时，就初始化一个全局的WebView待用，并隐藏； 当用户访问了WebView时，直接使用这个WebView加载对应网页，并展示
- 客户端代理数据请求
在客户端初始化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…
