iOS跨平台开发方案

极客时间学习有感

跨平台开发方案的三个时代

原生需要兼顾iOS和Android两个平台，如果还要跨其他平台Mac，Windows等需要更大的成本， 为了提高代码利用率，减少工作量，减少开发的人员等成本所以我们需要一套代码可以跨平台。这个探索过程经历了3个时代：

1. Web容器时代 : 基于Web相关技术通过浏览器组件来实现界面及功能，典型的框架包括 Cordova(PhoneGap)、Ionic和微信小程序；
2. 泛Web容器时代 : 采用类Web标准进行开发，但在运行时把绘制和渲染交由原生系统接管的技术，代表框 架有React Native、Weex和快应用，广义的还包括天猫的Virtual View等；
3. 自绘引擎时代 : 自带渲染引擎，客户端仅提供一块画布即可获得从业务逻辑到功能呈现的多端高度一致的 渲染体验。Flutter，是为数不多的代表。

Web容器时代

iOS : UIWebView, WKWebView
Android : WebView
利用这些移动端内嵌浏览器控件定协议即我们iOS中所说的OC 和 JS交互 – 传说中的Hybrid开发模式
但是相比较原生而言h5的加载等相对消耗更多性能；
H5加载过程

1. 浏览器控件加载H5页面的HTML主文档;
2. 加载过程中遇到外部CSS文件，浏览器另外发出一个请求，来获取CSS文件;
3. 遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响HTML文档的加载；
4. 加载过程中遇到JavaScript文件，由于JavaScript代码可能会修改DOM树，因此HTML文档会挂起渲染(加载解析渲染同步)的线程，直到JavaScript文件加载解析并执行完毕，才可以恢复HTML文档的渲染线程；
5. JavaScript代码中有用到CSS文件中的属性样式，于是阻塞，等待CSS加载完毕才能恢复执行。

这只是加载过程， 还有解析过程和渲染过程如果交叉展示会更复杂

泛Web容器时代

web容器时代， web容器包含大量web标准， 性能体验不能和原生相提并论，而我们用不到很多web标准。
泛Web容器时代，不再采用浏览器控件渲染，用原生自带的UI组件实现代替了核心的渲染引擎，仅仅保留了基本控件渲染能力。并且摒弃了多余的web标准，以相对简单的方式支持了移动端页面必要的web标准。绘制由原生接管。

自绘引擎时代

泛Web容器的缺点：因为这种方式使用原生控件承载界面渲染，所以框架本身需要处理平台相关的逻辑，而平台的版本和API会发生变化，原生控件渲染有各种各样的差异会有bug，所以要跟随原生的特性，跨平台的效果不是很好。
Flutter 有自己的语言， 跨平台的UI框架和渲染逻辑

• 渲染引擎依靠跨平台的Skia图形库来实现，Skia引擎会将使用Dart构建的抽象的视图结构数据加工成GPU 数据，交由OpenGL最终提供给GPU渲染，至此完成渲染闭环，因此可以在最大程度上保证一款应用在不 同平台、不同设备上的体验一致性。
• 而开发语言选用的是同时支持JIT(Just-in-Time，即时编译)和AOT(Ahead-of-Time，预编译)的Dart， 不仅保证了开发效率，更提升了执行效率(比使用JavaScript开发的泛Web容器方案要高得多)。

泛Web容器时代，不再采用浏览器控件渲染，用原生自带的UI组件实现代替了核心的渲染引擎，仅仅保留了基本控件渲染能力。并且摒弃了多余的web标准，以相对简单的方式支持了移动端页面必要的web标准。绘制由原生接管。