产品经理简单了解技术之Webview

在产品经理实现App功能时，经常会和IOS开发、安卓开发、前端开发一起讨论问题，是因为应用功能的实现开发可以分为两种：客户端开发和HTML5 移动端开发（简称H5开发）。H5开发指通过HTML5 + CSS + JS来构建一个网页版的应用，而中间的媒介就是Webview。内嵌Webview在应用开发中占据着重要的地位，它能以较低的成本实现Android、IOS、Web的复用，并且可以突破苹果的热更新封锁。但是Webview带来便捷的同时，同时Web的性能和体验也存在缺陷。给人最大的体验就是打开速度比native慢。打开打开一个WebView页面，页面往往会慢慢加载很久，若干秒后才出现你所需要看到的页面。在目前的工作中，部分产品功能是前端开发基于Webview进行实现，因此进行一个简单的了解。

01

—

什么是Webview？

Webview是可以将Web内容无缝整合到应用程序的UI中。支持完整的 Web 浏览体验，并在应用程序的原生视图旁边显示 HTML、CSS 和 JavaScript 内容。Webview可以简单看做一个可以嵌套到界面上的一个浏览器控件。

Android系统：Android内置Webkit内核的高性能浏览器，Webview则是在Webkit的基础上进行封装后的空间。

苹果系统：系统提供一个显示交互式网页内容的对象应用程序内浏览器。

在什么情况下应用的产品功能通过前端开发基于Webview实现？

产品功能对性能和用户体验的要求较低，功能需要频繁更改时，可以使用Webview进行实现。

02

—

Webview如何展示内容?

第一步：进行Webview初始化

当app首次打开网页和浏览器不同，在app中打开Webview的第一步不是建立链接，而是启动初始化浏览器内核。而对于用户来说，进行Webview初始化可能会出现交互无反馈。

第二步：建立连接

Webview与服务端建立连接，进行数据的收发。

第三步：接收页面/样式数据下载并执行渲染

建立连接后，前端请求服务端页面样式数据进行下载渲染，在页面没有在渲染之前，页面保持白屏，因此我们在使用一些app的时候会体验到由于未建立连接或者网速较慢影响接收下载而出现白屏。

在页面下载解析完成渲染之前，页面的基本框架出现，但是没有数据，页面处于不完整展示状态，出现loading状态。

第四步：展现

渲染完成，展现所需要的页面和样式。

产品经理简单了解技术可以在工作中与开发、测试等人员更好地沟通，推进需求的落地。