字节跳动技术整理，一文秒懂，Flutter 跨平台演进及架构

2. 原生渲染：使用JavaScript作为编程语言，通过中间层转化为原生控件来渲染UI界面，比如React Native、Weex。

3. 自渲染技术：自行实现一套渲染框架，可通过调用skia等方式完成自渲染，而不依赖于原生控件，比如Flutter、Unity。

5. 跨平台技术演进

跨平台技术，一直以来是每一个有追求的开发者所追逐的梦想，同时也是守旧者的噩梦，跨平台的多端一体化方案势必颠覆现有的原生各端独立开发模式，接下来列举众多的跨平台技术中最为关键的几个技术方案的演进阶段。

从上图可以看出，技术演进过程大致分以下三个阶段： 第一阶段，采用WebView技术绘制界面的Hybrid混合开发技术，通过JS Bridge 将系统部分能力暴露给 JS 调用，其缺点是性能较差，功能受限，扩展性差，不适合交互复杂的场景，比如Cordova。 第二阶段，针对WebView界面性能等问题，于是绘制交还原生渲染，仅仅通过JS调用原生控件，相比WebView技术性能体验更好，这是目前绝大部分跨平台框架的设计思路，比如React Native、Weex。另外，最近小程序也比较火，第一和第二阶段的融合，依然采用WebView作为渲染容器，通过限制Web技术栈的子集，规范化组件使用，并逐步引入原生控件代表WebView渲染，以提升性能。 第三阶段，虽然通过桥接技术使用原生控件解决了功能受限问题，提升性能体验，但相比原生体验差距还是比较大，以及处理平台差异性非常耗费人力。于是Flutter提出自带渲染引擎的解决方案，尽可能减少不同平台间的差异性, 同时媲美原生的高性能体验，因此业界对 Flutter有着极高的关注度。

面对现有的如此多跨平台方案，为何当下最火的跨平台技术是Flutter，有哪些优势呢？

RN、Weex均使用JavaScript作为编程语言，JavaScript作为前端开发语言，在跨平台开发中可谓大放异彩，利用web技术不仅能开发出网站，也可以开发手机端web应用和移动端应用程序，似有一统三界(Android、iOS、Web)的趋势，这就是大家常说的“大前端”时代。这些技术方案流畅度不太好，平台一致性较差，至今还没能大面积取代原生开发。

Flutter是以Dart语言编写，开发体验更接近客户端，从大家使用反馈来看也是如此，Flutter开发环境这一套的流程对于前端开发来说并不太友好。Flutter的定位同样是多端一体化，但是以客户端为首，先磨平Android和iOS双端开发体验，再逐步向Web端渗透，从Flutter规划的Roadmap也能看出，Flutter for web目前仍处于预览版，Flutter客户端方向都已经如火如荼上线了不少应用。

在此之前，大家常说“大前端”，对于Flutter技术，在笔者看来称之为“大移动端”更贴切，Flutter的UI框架优先支持客户端(Android/iOS)应用的同时，然后再适配Web端。移动互联网时代，不少公司都制定“移动优先”的战略，甚至只开发移动端，没有Web端。移动互联网的时代造就“大移动端”，Flutter作为一款能做到媲美原生的高性能跨平台技术方案，或许一统天下。

在跨平台技术领域，只要挑战在，技术就不会停滞，伴随着技术不断演进与革新，终将走向美好。

6. Flutter技术优势

Flutter是彻底的跨平台方案，既没有采用webView，也没有采用JS桥接原生控件，而是自行实现一套UI框架，在引擎底层通过Skia渲染到屏幕。对于UI之外所需要使用的移动设备自身提供的服务，比如相机、定位、屏幕触摸等，则采用Platform Channels跟原生系统通信的方式来实现。

对于Flutter优势，回到前面讲到移动端技术选型的4要素，研发效率、动态性、多端一致性、性能体验，分别对应下面这一组词语。

1. 高效率：采用dart语言编写代码，虽然刚开始上手需要点时间，但熟练后效率比较高。一套代码适用多个平台(Android、iOS、Web)，以及高效的Hot Reload能快速辅助调试；

2. 动态化：2017年3月苹果下发警告邮件，禁止JSPatch等 iOS App热更新方案，从此iOS动态化成为一个不宜公开讨论的话题。同样地，Flutter引擎在某一个官方版本对动态化做过一些尝试，但后续基于风险考虑移除，当然并没有阻碍大家对技术的探索，这里不方便展开讨论；

3. 高一致性：实现UI像素级的控制，Flutter渲染引擎依靠跨平台Skia图形库来实现，仅依赖系统图形绘制相关的接口，比如未来Android会支持vulkan，iOS会支持metal，这些都是通过skia封装调用。可最大程度上保证不同平台的体验一致性，见下图所示。