导读
本文主要针对常用跨端技术Flutter、ReactNative、Weex、H5，从技术特点、基本架构、编译原理、基本渲染流程等进行梳理分析；以及一些常见性能问题如何优化解决，然后如何进行技术选型或在进行业务开发时选择不同技术栈的逻辑是什么。
01背景在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！
随着技术的发展，产生了越来越多的端，如Android、iOS、Mac、Windows、Web、FuchsiaOS、鸿蒙等，而随着公司业务的发展，出现了越来越多的业务场景；作为APP开发人员，在日常工作中难免会碰到以下问题，如：1、UI设计师在进行UI审查时、测试同学在回归测试过程中、业务方在使用过程中，多少会发现端与端存在着差异，影响用户体验；2、同样的业务、同样的功能在不同的端上，需要每端投入资源去开发实现。而移动互联网的发展已经处于晚期，领导们越来越关心投入产出。
与此同时，出现了一些跨端的技术解决方案，可以实现一套代码在多端运行，解决业务发展上的痛点，如Flutter、ReactNative、Weex、H5（注：小程序和其它基于DSL的方案暂不在本文讨论范围）。然后对一些常用APP进行了对比分析，结论和预期一致，大部分都在使用跨端技术；Flutter和ReactNative使用率较高，Weex使用率相对低一些，H5基本都在使用，使用多种跨端技术框架是一种常态。那么，它们都有哪些特点呢?
02四种技术栈特点介绍理解，首先MCube会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。
图1-技术栈特点
通过图1，从性能、开发语言、渲染、包大小、社区、支持平台等方面梳理了它们的主要特点；不由产生几个问题：为什么原生和Flutter性能更好？为什么ReactNative和Weex性能相对较差？为什么H5页加载慢？这些性能问题该如何去优化，这是需要深入了解的问题，下面将从基本的架构、渲染流程、编译运行原理等一起分析。
0基础架构介绍.1Flutter基础架构介绍
ABM是Apple公司提供的iOS应用的分发渠道之一，与AppStore平台不同，ABM是年10月才开始在中国区启动的一套全新的应用分发系统，部分功能和企业账号类似，旨在为企业提供快速、高效的方式来部署应用到企业拥有的苹果设备。ABM与AppStore两个平台的关键区别如下：
图2-Flutter基础架构
Google在年发布了Flutter1.0，如图2所示，主要分为Framework层和Engine层；
Framework层：基于Dart实现，主要包括Text、Image、Button、动画、手势等各种Widgets，核心基础类库io、async、ui等package；基于Framework开发App，其运行在Engine层上，Framework和逻辑层都在基于Dart语言开发，对于开发而言，一切都是Widget，Widget是UI实现的基础；Engine层：基于C++、C实现；主要包括Skia渲染引擎库、DartRuntime、Text文本渲染库等，而Engine层自带Skia渲染引擎，以此实现所有端的渲染展示统一，在Engine层适配平台差异和跨平台支持，实现更完美的跨端效果；Dart代码通过AOT编译为运行平台的二进制代码。也就是说Flutter不需要桥接，自己完成从逻辑侧和渲染侧的所有能力，和原生类似。这也是它性能突出的关键所在。另外Android自带Skia引擎，所以也使得在Android的的编译产物比iOS更小。除了支持移动端外，还支持MacOS、Windows等PC端和Web端，在新的FunchsiaOS也支持Dart，使用Flutter作为UI框架。
对于FlutterWeb，Framework层是公用的，意味着业务层可以使用此层的widgets实现逻辑跨端；但Engine层则不同，需要通过CanvasRender或者HTMLRender对齐Engine的能力。年5月GoogleIO大会发布Flutter.0，除了移动端，更好的支持了MacOS、Linux平台，也包括其它一系列优化和支持，大家可以多