指南本文主要从技术特点、基本架构、编译原理、基本渲染流程等方面对常见的跨端技术Flutter、ReactNative、Weex、H5进行介绍等整理分析；以及一些常见的性能问题如何优化解决方案，然后如何进行技术选型或者做业务开发时选择不同技术栈的逻辑是什么。01背景在今年的敏捷团队建设中，我通过Suiteexecutor实现了一键式自动化单元测试。Juint除了Suite执行器还有哪些执行器？就这样开始了我的Runner探索之旅！随着技术的发展，出现了越来越多的终端，如Android、iOS、Mac、Windows、Web、FuchsiaOS、鸿蒙等，随着公司业务的发展，出现了越来越多的业务场景；作为一名APP开发者，在日常工作中难免会遇到以下问题，例如：1、UI设计师在进行UI审核时，测试同学在回归测试过程中，业务方在进行过程中在使用过程中，他们或多或少会发现端到端存在差异，影响用户体验；2、相同的业务、相同的功能在不同的终端上，每个终端都需要投入资源去开发实现。但是，移动互联网的发展已经进入高级阶段，领导者越来越关注投入和产出。同时也出现了一些跨终端的技术方案，可以实现一套代码在多个终端上运行，解决业务开发的痛点，比如Flutter、ReactNative、Weex、H5（注：小程序等）基于DSL的解决方案尚不可用。本文的范围）。然后，对一些常用的应用程序进行了比较和分析。结论与预期相符，且大部分采用跨端技术；Flutter和ReactNative的使用率比较高，Weex的使用率比较低。基本都是用H5，各种跨端技术都用上了。技术框架是常态。那么，它们有什么特点呢？02四种技术栈的特点介绍和理解。首先，MCube会根据模板缓存状态判断是否需要从网络上获取最新的模板。获取模板后，将加载模板。loading阶段会将product转化为viewtree的结构，转化完成后，会使用表达式引擎解析表达式并获取正确的值，事件解析引擎会解析用户-定义事件并完成事件绑定，完成解析赋值和事件绑定后渲染视图。最后，目标页面显示在屏幕上。图1-技术栈特征通过图1，从性能、开发语言、渲染、包大小、社区、支持平台等方面梳理出它们的主要特征；出现几个问题：为什么原生和Flutter更好？为什么ReactNative和Weex性能比较差？为什么H5页面加载慢？如何优化这些性能问题是一个需要深入理解的问题。下面将对其基本架构、渲染过程、编译运行原理等进行分析。03基础架构介绍3.1Flutter基础架构介绍ABM是Apple提供的iOS应用分发渠道之一。与AppStore平台不同，ABM是2019年10月在中国推出的全新应用分发系统，部分功能类似于企业账户，旨在为企业提供一种快速高效的方式将应用部署到企业自有的苹果设备上。ABM和AppStore两个平台的主要区别如下：图2-Flutter基础架构Google在2018年发布了Flutter1.0，如图2所示，主要分为Framework层和Engine层；Framework层：基于Dart实现，主要包括Text、Image、Button、animation、gesture等各种widget，核心基础类库io、async、ui等封装；基于Framework开发App，运行在Engine层，Framework和逻辑层基于Dart语言开发，对于开发来说，一切都是Widget，而Widget是UI实现的基础；引擎层：基于C++，C实现；主要包括Skia渲染引擎库、DartRuntime、Text文本渲染库等，Engine层自带Skia渲染引擎，实现全终端统一渲染显示，适应平台差异，跨平台支持在Engine层，实现更完美的跨端效果；Dart代码通过AOT编译成运行平台的二进制代码。也就是说，Flutter不需要桥接，自己完成了逻辑端和渲染端的所有能力，这与native类似。这也是其出色表现的关键。另外，Android有自己的Skia引擎，所以也使得Android上的编译产物比iOS小。除了支持移动端外，还支持MacOS、Windows等PC端和Web端。新的FunchsiaOS也支持Dart，使用Flutter作为UI框架。对于FlutterWeb，Framework层是public的，也就是说业务层可以使用这一层的widget来实现逻辑跨端；但是Engine层不一样，需要能够通过CanvasRender或者HTMLRender来对齐Engine。2022年5月，谷歌IO大会发??布Flutter3.0。除了移动端，更好地支持MacOS和Linux平台，还包括其他一系列的优化和支持。你可以多加注意。3.2ReactNative基础架构介绍ABM是Apple提供的iOS应用分发渠道之一。与AppStore平台不同，ABM是2019年10月在中国推出的全新应用分发系统，部分功能与企业账户类似，旨在为企业提供快速高效的方式将应用部署到企业自有的苹果设备上。ABM和AppStore两个平台的主要区别如下：图3-ReactNative基础架构ReactNative于2015年由Facebook开源，如图3所示，主要服务于Android和iOS，采用React开发实现逻辑端代码（也可以应用到前端），使用Redux实现状态管理、UI渲染、网络请求、动画等。桥接将DOM结构传递给native端，native端解析映射到本机控件。原生DOM结构形成后，调用原生能力进行渲染显示。2021年，新版ReactNative对底层进行了重构。大家可以关注一下，比如改变线程模型，引入异步渲染能力，允许多次渲染和简化异步数据处理，简化JSBridge等。3.3Weex基础架构介绍图4-Weex基础架构Weex是一个跨端框架2016年阿里发布。如图4所示，可以在服务器上部署Weex的编译产物jsbundle，APP加载后即可运行。也可以看出具有动态发布的能力；类似于ReactNative，在Weex实际运行过程中，会在js端形成一个dom，由native端通过Bridge解析，映射到native控件，再由nativeability渲染；Weex基于JSV8引擎，基于Vue设计，支持Android、iOS、Web端。3.4WebView基础架构介绍图5-WebView内核基础架构WebView内核模块比较复杂，如图5所示，这里是WebView架构的主要部分：桥接协议是上层逻辑测试与WebView的通信层，是JS和Native相互通信的能力层；WebCore是浏览器加载、排版和渲染页面的基础，主要包括资源加载、HTML解析、CSS解析、DOM解析、排版渲染等。JavaScript引擎是JavaScript解析器，JavaScriptCore是Webkit的JavaScript引擎，V8是Google的Blink的默认引擎；WebKitPorts是WebKit的移植部分，包括网络、字体、图片解码、音视频解码、硬件加速等模块；然后用到很多第三方库，包括2D图形库、3D图形库、网络库、存储库、音视频库等；最底层是操作系统，支持Android、iOS、Windows等系统。3.5编译原理分析Flutter支持Release、Profile和Debug编译模式。Release模式采用AOT预编译模式，预编译成机器码，编译生成对应架构的代码，直接在用户设备上运行对应的机器码，运行速度快，执行性能好；该模式关闭所有调试工具，仅支持真实设备。对于编译产品，iOS端主要生成App.framework和Flutter.framework；App.framework是dart代码编译的产物，Flutter.framework是engine编译的产物；Android端主要增加了libapp.so和libflutter.so，lib.so下的libapp是dart代码编译的产物，libflutter.so是engine编译的产物。不同的是在assets下增加了flutter_assets，用于存放引用资源文件。配置文件模式类似于发布模式。该模式最重要的功能是可以使用DevTools来检测应用程序的性能，进行性能调试分析。Debug模式使用JIT即时编译技术，支持常用的开发调试功能hotreload，在开发调试时使用，包括支持的调试信息、服务扩展、Observatory、DevTools等调试工具，支持模拟器和真机设备。iOS端主要生成App.framework和Flutter.framework，App.framework文件夹下有较多的isolate_snapshot_data、kernel_blob.bin、vm_snapshot_data；Android端上面的文件也比较多，但是lib下少了libapp.so文件。ReactNative整体分为逻辑端和渲染端。逻辑端基于js引擎，将基于React编写的代码编译成JavaScript原生代码，然后编译生成jsbundle文件，内置或发送到APP运行；而渲染端依赖于Android。或者iOS原生渲染，需要按平台编译出相应的编译产物，然后发布到服务器或者构建到APP中。Weex类似于ReactNative。Weex将源代码编译成js包。这些js包可以部署在服务器端。APP下载jsbundle后，通过js引擎构建虚拟dom，通过bridge映射到原生dom，由原生渲染引擎渲染。.H5：以React和Vue为例，使用框架开发的代码会被编译成JavaScript原生代码，即在浏览器或WebView中执行；内核会先建立连接，加载资源，然后解析、布局、绘制、渲染呈现给用户。3.6基本渲染流程对比图6-基本渲染流程对比渲染流程简单分析，基于Android和iOS原生开发APP，调用Framework框架层实现上层逻辑，直接调用系统渲染引擎进行布局绘制后渲染显示；基于Flutter开发APP，会直接调用Skia渲染引擎进行渲染显示；它不依赖于原生渲染。基于ReactNative或Weex开发APP是不同的。首先基于React或Weex开发业务逻辑，然后将jsbundle包预置或下载到APP中，再通过bridge将虚拟dom映射到原生控件，再进行原生渲染引擎将被调用进行渲染。展示。基于Hybrid方案开发APP需要通过React、Vue等前端框架实现。主页必须编译成JavaScript原生语言，然后通过链接在WebView或浏览器中加载页面。关键过程是连接加载、解析、排版、绘制，最后调优渲染引擎进行显示。通过以上所有分析，可以回答前面提出的问题：为什么native和Flutter表现更好？主要是布局绘制后直接调整系统或者用自带的渲染引擎显示。为什么ReactNative和Weex性能比较慢？主要原因是需要下载jsbundle包，将jsdom结构解析映射到native，但是下载和presets比较耗时，而且依赖native渲染（新版ReactNative升级了基础设施，并且据说性能提升很大，大家也可以关注）。为什么H5页面加载慢？主要原因是连接和加载比较耗时，占用了大部分时间。连接和加载完成后，基本上就是WebView或者浏览器本地可以完成的工作了，后期优化也可以以此为切入点。04常见主要性能问题优化在实际开发过程中，我们也遇到了一些性能问题，接下来会简单介绍一下。4.1如何优化Flutter性能？关键优化指标：页面异常率、页面FPS帧率、页面加载时间。页面异常率（异常发生次数/页面整体PV数）：通过runZoned和FlutterError这两个方法，在异常拦截方法中统计异常发生次数和堆栈数据。页面FPS帧率：如何采集FPS是关键。通过window对象注册onReportTimings回调，可以得到整个构建和渲染过程的耗时，进而计算出页面的FPS。页面加载时间（页面可见时间-页面创建时间）：页面可见时间通过WidgetsBinding的addPostFrameCallback回调获取，页面创建时间通过页面初始化方法initState获取。将以上数据上传至监控和性能分析平台（mPaaS和CandleDragon）作为后期性能分析和优化的参考数据。在开发过程中，可以使用DevToos性能分析工具和FlutterInspector进行性能分析和优化。按需加载和局部刷新也是常用的优化方式。其他性能优化如布局加载优化、状态管理优化、启动优化-引擎预加载、内存优化、包大小优化等，不再详细介绍。大家可以多关注Flutter社区，定期升级Flutter版本，会有不错的效果。4.2如何优化ReactNative加载慢？一种是预下载bundle包，减少包加载时间，打开页面直接贴图渲染，达到更快打开页面的目的，当然你也可以预置包，需要的平衡封装尺寸和性能；二是尝试升级最新的ReactNative版本，新版本升级基础设施，主要包括线程模型，引入异步渲染能力，优化JSBridge，性能显着提升（笔者咨询了京东mPaaS团队，也在跟进中).4.3如何优化APP中H5加载慢的问题图7-加载H5流程介绍图7描述了H5页面从WebView初始化到最终渲染的整个过程，分析了上面H5的基本渲染流程。耗时环节主要有两点。一是WebView的初始化，可以通过提前初始化WebView来优化；另一种是资源（html、js、css\图片等）的请求连接和加载，可以使用H5离线包解决方案解决问题，通过资源预加载，解决html、js、css的加载问题和资源图片，从而大大减少资源的加载时间，提升页面加载性能，甚至达到秒开的效果。05总结那么如何选择技术呢？我们应该在提高开发效率和用户体验的前提下思考，然后分析关键因素：1、技术栈的基础架构如何，原有架构是否优秀，是否更面向未来；2、团队技术栈的成熟度和学习成本，社区的成熟度；3、研发效率，实现多端代码复用，减少多端差异，降低开发成本，更专注于业务开发；效率提升是一个持续的收益过程，体现在业务发展的整个生命周期中。当然，新技术在实践初期会有一些成本，但熟悉后的总收益是长期的；4、是否更好解决多端一致性问题，更好解决UI设计师在UIreview时，测试学生在测试过程中1、业务方在使用过程中发现的端到设备不一致的问题，统一风格也是良好用户体验的重要体现；5.对动态的支持程度，解决新需求必须发布的问题，也是业务的痛点和关键因素；6.用户体验是最关键的，还要考虑用户的使用环境（网络环境、手机配置）等；对于正规的C端项目，面对千万甚至上亿的用户，技术选型策略一定是在保证用户体验的基础上实现降本提效，用户是第一位的，用户利益最大化确保公司的利益；对于非C端项目，可能需要在降本增效的基础上考虑提升用户体验。本文作者：京东国际技术研发部-陆旭、张工、姚峰、高鑫鹏、李成峰、陈海蛟、高明、范伟廉、单玉琴、穆新建
