Hybird
Hybird翻译为中文就是混合的意思，在前端领域表示混合开发模式。什么是混合开发模式？为什么会存在这种开发模式？在了解这些之前，我们要先对移动端的发展史有一定的了解。
移动端发展史
远古时期
在计算机刚刚走进人们生活时，是不存在前端开发的，也不存在移动端开发。
- 那个时候的页面非常简单，每一个页面都是由请求服务器来完成的；
- 用户在页面上也不存在复杂的交互，JavaScript刚刚诞生；
- 手机还没有被发明，还处于传呼的年代；
- 乔布斯可能刚出生？
中古时期
随着硬件的不断迭代更新，传呼机变为了大哥大，大哥大慢慢发展为手机的雏形，移动端进入野蛮生长阶段。
- 这个时候，用户由单一的PC端发展到了移动端，进入了移动端Andriod蓬勃发展时期。
- 其后乔布斯创办苹果，推出IOS操作系统，移动端进入双端时代。
- 在PC端，随着电脑的进一步普及ECMA组织成立，JavaScript得到大规模使用和升级。同时html、css也不断升级拓展，页面支持的特性和功能越来越多，页面越来越复杂。
近古时期
- 随着web1.0向web2.0升级，PC端的开发模式不再是以前页面从服务器读取，而是变为了SPA模式。至此服务端只负责处理数据，页面的渲染和交互交给另一批人。前后端得到真正意义上的分离，前端开发正式出现。
- 在移动端，由于中古时期的发展出现了两批开发人员。分别是Android端的
Java开发和IOS端的Objective-C开发人员。开发一款App需要开发两套版本，一套Android一套IOS，两端同时开发完成才可以上线。 - 在这个时期人们的生活水平越来越好，移动端硬件不断更新换代使得手机进入家家户户，成为人们日常使用最多的工具。
现在
- 硬件、软件的继续更新迭代，使PC端所能展示的页面越来越丰富，与用户的交互越来越复杂。相比远古时期的用户体验飞越了不止一个层级。
- PC端体验不断上升的同时，移动端还是处于双端共同开发的模式。随着手机在人们生活中扮演越来越重要的角色，它所承载的功能越来越多，页面也越来越复杂。
- 传统的双端开发效率低，不能满足复杂页面和复杂交互的需要。同时两端开发使人力成本增加，上线必须两端同时开发好，极大地拖延了项目进度和周期。
- 因此这时候就有人在想，可不可以把PC端开发好的东西嵌入到App中。复杂页面的展示和复杂的交互都由更为合适的html5搭配JavaScript来做，涉及到使用原生能力（相机、位置、传感器等）或者原生实现比h5更加流畅的地方由原生来做。
这样就可以完美结合h5开发效率高、特性好、一次开发两端共用、移植性强的优点和原生端操作自己原生功能流畅的优点，混合开发模式就此诞生了！！！
什么是混合开发？
经过上面对移动端的介绍，我们知道混合开发模式就是：
由web端和原生Native端共同协作开发一款App的开发模式。其中web端负责处理复杂的页面及交互，Native端负责提供原生具备的能力以及一些流畅的渲染。
这种开发模式听上去是很不错，但是如何将web端内嵌到native端并且正常执行呢？要知道native端是Java和Object-C环境，web端是JavaScript二者并不兼容。
webview的出现，为我们彻底解决了这个问题。
Webview
Webview是什么？
让我们看看Android官网对他的介绍：
A View that displays web pages.
Basic usage
WebView objects allow you to display web content as part of your activity layout, but lack some of the features of fully-developed browsers. A WebView is useful when you need increased control over the UI and advanced configuration options that will allow you to embed web pages in a specially-designed environment for your app.
基本用法
将web内容作为活动布局的一部分来显示，但是所包含的web内容会缺少一部分完整浏览器所具备的功能。当您需要增加一些复杂的UI和复杂的交互时WebView非常有用，webview会为你的App应用提供一个特殊的环境来支持这些web功能。
在Android开发环境中，将一个页面称之为一个activity，将一个盒子或者窗口称为view。你可以将简单的将activity理解为html中的<body>标签，将view简单理解为<div>标签。
同时根据官网的介绍，webview extends view。
综上，我们可以得出结论：
webview是Native所提供的一个页面布局控件，继承自View，用于展示web页面。他为Native端提供了一个特殊的环境来支持web页面复杂的Ui和交互。
Webview如何做到解析JavaScript？
在PC端我们是基于浏览器来渲染和解析JavaScript的，同样的webview也内置了浏览器内核。通过浏览器内部的js解析引擎来解析JavaScript。
Android端在4.4版本之前使用的是不同版本的webkit内核，4.4后直接使用了Chrome。
iOS中存在两个webview，分别是UIWebView和WKWebView。UIWebView自IOS2就存在，但是性能较差，特性支持较差。所以后来有了他的升级版，WKWebView。目前UIWebView文档官网已经弃用了。
可以看看IOS官网对WKWbView的介绍：
An object that displays interactive web content, such as for an in-app browser.
一个对象用来展示人机交互的web内容，就像一个app内置浏览器。
WKWebView 是 iOS8 之后出现的，目的是取代笨重的 UIWebView，它占用内存更少，大概是 UIWebView 的 1/3，支持更好的 HTML5 特性，性能更加强大。
这里值得一提的是，webview在移动端是早就存在的，并不是在现代被开发出来的产物。但是就像他的介绍一样最初它仅仅是用作展示一个web页面。但我们后续想通过他展示复杂的UI并且参与用户的交互行为，而不仅仅是展示。
受制于当时的硬件和技术在App中使用webview做展示和操作还是很不流畅的，有明显的卡顿，尤其是在做切页和动画时。而且因为Android端和IOS端内置的浏览器不同，也会产生一定的兼容性问题。但是随着手机硬件和软件系统的更新换代，Android5.0+、ios9.0+系统以上的手机上述问题被得到了有效的解决。使用原生打开webview几乎可以实现无缝打开，无限接近于原生。
Webview如何实现双端通信？
上一条解决了为什么webview可以加载页面和解析JS，但是混合开发的根本问题没有解决。那就是在不同的语言环境下，web端和Native端如何做到互相通信，互相调用对方的方法？
web端与Native端的通信方式主要分为以下两种：
- 通过
UrL Scheme拦截。 - 通过
JSBridge注入。
受篇幅所限，两种通信方式的具体实现请看我的下一篇文章
