「前端」小步骤开发之 webview
开发小步骤绕不开 webview，什么是 webview？有什么作用呢？
一、什么是 webview
WebView 也叫网页视图，是原生体系用于挪动端 APP 嵌入(Embed) Web 武艺，办法是内置了一款高功能 webkit 内核欣赏器。明白话就是可以用来承载网页的容器。
Webview 是一个基于 webkit 引擎，可以剖析 DOM 元素，展现html页面的控件，它和欣赏器展现页面的原理是相反的，以是可以把它当做欣赏器对待。
如今手机使用层开发的朝向有两种：客户端开发(好比我们说的app)和 HTML5 挪动端开发！
所谓的 HTML5 端就是：HTML5 + CSS + JS 来构建 一个网页版的使用,而这正中的前言就是这个 WebView,而 Web 和网页端可以经过JS来举行交互,好比, 网页读取手机接洽人,调用手机干系的API等！
并且比拟起平凡的客户端开发,HTML5挪动端有个上风： 可以用百分比来布局,并且假如 HTML5 端有什么大改,我们不必像客户端那样去重新下一个 APP,然后 掩盖安装,我们只需修正下网页即可！
而客户端…惨不忍睹,固然 HTML5 也有个缺陷,就是功能的成绩, 数据积累,耗电成绩,另有闪屏等等…
二、webview主要用于什么场合？大概说什么需求下会使用到webview?
在电脑上展现 html 页面，经过欣赏器掀开页面即可欣赏，而手机体系层面，假如没有 webview 支持，是无法展现 html 页面，以是 webview 的作用即用于手机体系来展现 html 界面的。以是它主要在必要在手机体系上加载 html 文件时被必要。
三、微信小步骤中的 webview
小步骤的主要开发言语是 JavaScript ，小步骤中，逻辑层和渲染层是分开的，分散运转在不同的线程中。 具体的运转情况如下：
|
运转情况 |
逻辑层 |
渲染层 |
|
iOS |
JavaScriptCore |
WKWebView |
|
安卓 |
V8 |
chromium定制内核 |
|
小步骤开发者东西 |
NWJS |
Chrome WebView |
可以看出，小步骤的渲染层也是运转在webview上的；
四、为什么webview会很慢？
平凡用户拜候webview履历历程如下：
- 交互无反应
- 抵达新的页面，页面白屏
- 页面基本框架显现，但是没多数据；页面处于loading形态
- 显现所需的数据
于是，做了测试后果如下
分析
在欣赏器中，我们输入地点时（乃至在之前），欣赏器就可以开头加载页面。 而在客户端中，客户端必要先破费时间初始化WebView完成后，才开头加载。
五、怎样制止webview加载慢？
- 全局WebView
在客户端刚启动时，就初始化一个全局的WebView待用，并隐蔽； 当用户拜候了WebView时，直接使用这个WebView加载对应网页，并展现
- 客户端署理数据哀求
在客户端初始化WebView的同时，直接由native开头网络哀求数据； 当页面初始化完成后，向native获取其署理哀求的数据。
六、webview的功能优化
- WebView初始化慢，可以在初始化同时先哀求数据，让后端和网络不要闲着。
- 后端处理慢，可以让办事器分trunk输入，在后端盘算的同时前端也加载网络静态资源。
- 脚本实行慢，就让脚本在最初运转，不壅闭页面剖析。
- 同时，公道的预加载、预缓存可以让加载速率的瓶颈更小。
- WebView初始化慢，就随时初始化好一个WebView待用。
- DNS和链接慢，想办法复用客户端使用的域名和链接。
- 脚本实行慢，可以把框架代码拆分出来，在哀求页面之前就实行好。
七、webview 和原生Native怎样选择？
在内嵌的WebView中应该限定允许掀开的WebView的域名，并设置运转拜候的白名单。大概当用户掀开外部链接前给用户剧烈而分明的提示。
在一个客户端内，native现在主要功效是提供高效而基本的功效；内里的WebView则添加一些功能体验要求不高但动态化要求高的才能。
提高客户端的动态才能，大概提高WebView的功能，都是提升App功效掩盖的办法。
而现在的种种框架，ReactNative、Week包含微信小步骤，都是这个趋向的实验。
文章泉源：
https://juejin.cn/post/6950890297450561550
