前言大家好，我是simbawu，@BooheeFETeamLeader，如果您对本文有任何疑问，欢迎来这里讨论。随着移动互联网的普及和快速发展，手机已经成为互联网行业最大的流量分发入口。而随着5G的快速发展，未来将会有越来越多的“终端”如雨后春笋般涌现。而“快”是互联网的生存之道。为占领市场，企业将积极跟进，快速布局。对于同一个应用，各个“端”独立开发，不仅开发周期长，人员成本高。同时，作为技术人员，也不应该满足于这种重复、低耗能的工作状态。在这样的情况下，跨平台的技术解决方案也越来越受到人们和企业的关注。接下来，我将从原理、优缺点等方面与大家分享《跨平台技术演进》。H5说到跨平台，没有人不知道H5。不管是Mac、Windows、Linux、iOS、Android还是其他平台，只要给它一个浏览器，它甚至可以在“月球”上运行。下面浏览器架构，我们来看看让H5如此霸道的浏览器架构：UserInterfaceUserInterface：提供用户与浏览器的交互BrowserEngineBrowserEngine：控制渲染引擎和JS解释器RenderingEngineRenderingEngine：负责页面RenderJavaScriptInterpreterJSInterpreter：执行JS代码并将结果输出给渲染引擎NetworkingNetworkingWorkingGroup：处理网络请求UIBackendUIBackend：绘制widgetsDataStorageDataStorage：管理用户数据浏览器由以上7部分组成，以及“渲染引擎”是性能优化的重中之重，让我们一起了解渲染原理。不同的浏览器有不同的渲染引擎内核，渲染过程也会不同，但主要过程还是一样的。分为以下6个步骤：HTML解析DOMTree，CSS解析CSSOMDOMTree和CSSOM生成RenderTreeLayout根据RenderTree计算每个节点的大小和位置Painting根据计算出的信息绘制整个页面的像素信息复合倍数compositeimages层被发送到GPU，GPU将层合成并显示在屏幕上。从以上6个步骤，我们可以总结出渲染优化的要点：Layout在浏览器渲染过程中是比较耗时的，应该尽量避免重新排列生成的复合层，它所占的比例非常高的内存，可以通过减少复合层来优化以上是浏览器端的内容。但是H5作为跨平台技术的载体，如何与不同平台的APP进行交互呢？这时候，JSBridge就该出场了。JSBridge原理JSBridge，顾名思义，是JS和Native之间的桥梁，用于JS和Native之间的通信。通信分为以下两个维度：JavaScript调用Native，有两种方式：拦截URLScheme：URLScheme是一个类似于URL（boohee://goods/876898）的链接，当web前端发送URLScheme请求时，Native拦截请求，根据URLScheme进行相关操作。注入API：通过WebView提供的接口，将对象或方法注入到JavaScriptContext（窗口）中，使得JavaScript调用时，直接执行相应的Native代码逻辑，从而达到JavaScript调用Native的目的。Native调用JavaScript：JavaScript将JSBridge等对象暴露给window，让Native可以直接访问。那么App中加载H5的流程是怎样的呢？App打开H5的过程分为4个阶段：打开无反馈交互的页面，白屏请求API，加载状态显示数据，正常显示这四个步骤。优缺点分析下面，我们分析一下H5的优缺点：优点跨平台：只要有浏览器，任何平台都可以访问开发成本低：生态成熟，学习成本低，调试方便迭代速度快：无需审核，及时响应，用户可无感知使用最新版本。缺点性能问题：在响应速度、流畅度、动画等方面与原功能有很大差距技术进步，相信H5在未来会得到越来越好的发展。2018年是微信小程序快速发展的一年。2019年，各大厂商迅速跟进，已经产生了不小的影响力。下面，我们以微信小程序为例，分析一下小程序的技术架构。和H5一样，小程序也是基于Webview实现的。但是，它包括View视图层和AppService逻辑层两部分，它们独立运行在各自的WebView线程中。View可以理解为提供UI渲染的h5页面。底层功能由WAWebview.js提供，具体如下：消息通信封装为WeixinJSBridge日志组件Reporter封装wxapi（UI相关）小程序组件实现和注册VirtualDOM，Diff和RenderUI实现页面事件触发，各window有独立的WebView进程，所以微信限制打开5级以上的页面，保证用户体验。AppService提供逻辑处理、数据请求和接口调用。底层功能由WAService.js提供，如下：日志组件Reporter封装了wxapiApp、Page、getApp、getCurrentPages等全局方法。AMD模块规范的实现运行环境：iOS：JavaScriptCoreAndriod：X5内核，基于MobileChrome53/57DevTool：nwjsChrome内核只有一个WebView进程。View&AppService通过系统层的JSBridage与视图层和逻辑层进行通信。逻辑层通知视图层数据变化，触发视图层的页面更新，视图层将触发的事件通知给逻辑层进行业务处理。优缺点分析优点PreloadWebView，准备新的页面渲染View层和逻辑层分离，由数据驱动，不直接操作DOM使用VirtualDOM进行局部更新基于组件开发缺点还是使用WebView渲染，不是原生渲染，差体验在非微信环境下无法运行没有window和document对象，也无法使用基于浏览器的JS库。无法灵活操作DOM，实现更复杂的效果。页面大小和打开的页面数量是有限的。既然WebView性能不佳，有没有更好的解决方案呢？让我们来看看ReactNative。ReactNativeRN的思想是在不同的平台上编写基于React的代码，实现Learnonce，writeanywhere。VirtualDOM在内存中，不同的渲染引擎可以在不同的平台上生成UI。JS和Native通过Bridge进行通信。ReactNative的工作原理在React框架中。JSX源码最终通过React框架渲染到浏览器真实的DOM中，而在ReactNative框架中，JSX源码通过ReactNative框架编译后，与Native的原生UI组件进行映射，使用原生元素渲染，而不是DOM元素，非常接近NativeApp在UI渲染方面。###ReactNative与Native平台的通信ReactNative使用JavaScriptCore作为JS解析引擎。在Android上，JavaScriptCore需要附加到应用程序本身。在iOS上，JavaScriptCore是系统的一部分，不需要依附于应用程序。使用Bridge连接JS和原生NativeCode。Native和JavaScript都保存了一个配置表，它标记了Native暴露给JavaScript的所有模块和方法。通过传递ModuleId、MethodId和Arguments进行交互。优缺点分析优点塌陷平台开发：与原生的ios和android应用各自维护一套业务逻辑相似的代码相比，ReactNative只需要同一套javascript代码就可以同时运行在ios和android平台上。维护成本要低得多。快速编译：与Xcode中原生代码编译时间较长相比，ReactNative采用热加载即时编译的方式，提升了AppUI的开发体验，几乎达到了Web开发一样的效果可以随时更改，随时可以看到。快速发布：ReactNative可以通过JSBundle即时更新应用。与原来冗长的审核上传流程相比，新功能的发布和测试效率得到了极大的提升。渲染和布局更高效：ReactNative摆脱了WebView的交互和性能问题，可以直接在web开发中应用css布局机制。摆脱autolayout和frame布局中繁琐的数学计算，更加直接简单。缺点动画性能差：ReactNative在动画效率和性能支持方面还存在一些问题，性能不如原生Api。原生平台无法完全屏蔽：根据目前的ReactNative官方文档可以发现，还是有一些组件和API区分了Android和IOS版本。即使是共享组件也将具有平台独有的功能。也就是说，严格意义上的“一套代码，多平台使用”是无法真正实现的。另外，由于仍然依赖于ios和android的原生细节，不了解原生平台的开发者可能会遇到一些坑。生态不完善：缺乏很多基础控件，第三方开源质量参差不齐。展望未来，虽然RN还存在不足，但新版本的RN做了以下改进，RN团队也在积极准备大版本重构。开发者能否成为值得信赖的跨平台解决方案，让我们拭目以待。更改线程模式。UI更新不再需要同时在三个不同的线程上触发，而是可以在任何线程上同步调用JavaScript以进行优先更新，同时将低优先级的工作推出主线程以保持对UI的响应能力。引入了异步渲染功能。允许多重渲染并简化异步数据处理。简化JSBridge，使其更快、更轻。既然ReactNative还是摆脱不了原生渲染，有没有办法直接控制GPU，自制引擎进行渲染呢？我们终于迎来了Flutter！FlutterFlutter是Google开发的一套全新的跨平台、开源的UI框架，支持iOS和Android系统的开发，是未来新操作系统Fuchsia的默认开发包。渲染引擎由跨平台的Skia图形库实现，只有图形绘制相关的接口依赖于系统，可以最大程度保证不同平台和设备上体验的一致性。逻辑处理使用支持AOT的Dart语言，执行效率也很高。远高于JavaScript。Flutter架构原理Framework：由Dart实现，包括MaterialDesign风格的Widgets、Cupertino(foriOS)风格的Widgets、text/picture/button等基础widgets、渲染、动画、手势等。这部分的核心代码是：flutter仓库下的flutter包，以及sky_engine仓库下的io、async、ui（dart:ui库提供了Flutter框架和engine的接口）等包。Engine：C++实现，主要包括：Skia、Dart和Text。Skia是一个开源的二维图形库，为各种硬件和软件平台提供通用的API。它已被用作GoogleChrome、ChromeOS、Android、MozillaFirefox、FirefoxOS等许多产品的图形引擎。支持的平台还包括Windows7+、macOS10.10.5+、iOS8+、Android4.1+、Ubuntu14.04+等。Skia作为渲染/GPU后端在Android和Fuchsia上使用FreeType渲染，在iOS上使用CoreGraphics渲染字体。Dart部分主要包括：DartRuntime、GarbageCollection（GC），如果是Debug模式，还包括JIT（JustInTime）支持。在Release和Profile模式下，AOT（AheadOfTime）被编译成nativearm代码，没有JIT部分。Text为文字渲染，其渲染层次如下：libtxt衍生自minikin的库（用于字体选择，分隔线）。HartBuzz用于字形选择和整形。Embedder：是嵌入层，将Flutter嵌入到各个平台。这里的主要工作包括渲染Surface设置、线程设置和插件。从这里可以看出Flutter的平台相关层很低。平台（如iOS）只提供画布，其余渲染相关逻辑全部在Flutter内部，这使得它具有很好的跨终端一致性。Dart的优点很多人会疑惑为什么Flutter要用Dart而不是JavaScript来开发。以下是Dart的优点。Dart有更好的性能。在JIT模式下，Dart基本上和JavaScript一样快。但是Dart是支持AOT的，在AOT模式下运行时，JavaScript是远远落后的。速度的提升对于高帧率下的视图数据计算非常有帮助。本机绑定。在Android上，v8的NativeBinding可以很好的实现，而iOS上的JavaScriptCore做不到，所以如果使用JavaScript，很难统一Flutter基础框架的代码模式。而Dart的NativeBinding可以通过DartLib很好的实现。紫红色操作系统。FuchsiaOS内置的应用程序浏览器使用Dart语言作为应用程序开发语言。优缺点分析优点和性能强：在两个平台重写各自的UIKit，对接平台底层，减少UI层的多层转换，UI性能可以匹配原生优秀的语言特性：参考上面Dart优势分析和优秀的路由设计：Flutter的路由价值很方便。推送一个路由会返回一个Future对象（即Promise对象）。使用await或.then可以弹出目标路由，并在返回当前页面时接收返回值。缺点优点就是缺点。Dart语言生态小，熟练成本比较高。UI控件的API设计较差，原生集成障碍较多，不利于逐步升级。总结移动互联网的普及和快速发展，跨平台技术风起云涌，这也是技术发展过程中唯一的办法，就是要等到潮水退去，才能知道谁在裸泳。个人比较看好H5或者类H5的解决方案。给它一个甚至可以在“月球”上运行的浏览器。这才是真正的跨平台，其他都是浮云。广而告之，本文发表于薄荷前端周刊，欢迎关注星★，转载请注明出处。欢迎讨论，点个赞走咯?????～
