小程序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 也有个缺点,就是性能的问题, 数据积累,耗电问题,还有闪屏等等...

在电脑上展示 html 页面，通过浏览器打开页面即可浏览，而手机系统层面，如果没有 webview 支持，是无法展示 html 页面，所以 webview 的作用即用于手机系统来展示 html 界面的。所以它主要在需要在手机系统上加载 html 文件时被需要。

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

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

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

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

于是，做了测试结果如下

说明

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

五、如何避免webview加载慢？

1. 全局WebView

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

2. 客户端代理数据请求

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

六、webview的性能优化

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

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

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

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

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

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

文章来源：https://juejin.cn/post/6950890297450561550

,