Tech
导读
本文主要研究了通用的跨端技术:Flutter, ReactNative, Weex, H5,从技术特点、基本架构、编译原理、基本渲染过程等综合分析;以及如何优化一些常见的性能问题;那么,在进行商业开发时,如何选择一种技术类型或选择不同的技术堆栈的逻辑是什么?
01
背景
在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！
随着技术的发展，有越来越多的目的,Android、iOS、Mac、Windows、Web、Fuchsia OS、Hong Mon等。随着公司的业务的发展,越来越多的商业场景;作为应用程序开发者,在日常工作中,你必然会遇到以下问题:当用户界面设计者进行用户界面检讨时,测试学生返回测试过程,而业务方面则使用这个过程,有多少人会发现终点之间存在差异,影响用户体验;2.相同业务,不同端的相同功能,为了发展和实施,必须在各个方面投入资源。移动互联网的发展已经处于后期阶段,领导者对投入产出越来越感兴趣。
与此同时，一些跨部门的技术解决方案已经出现,一套代码可以在多个端上实现,解决商业发展瓶颈例如,Flutter、ReactNative、Weex和H5(注:小程序和其他基于DSL的程序目前没有讨论)。然后我们分析了一些常见应用软件,结论和预期一致，其中大多数使用跨国技术;Flutter和ReactNative的使用率较高,威克斯的使用率相对较低,H5基本都在使用，采用各种跨部门的技术框架是规范的。那么，它们的特征是什么?
02
四种技术栈特点介绍
理解，首先,MCube将根据模板缓存状态确定网络是否需要获取最新的模板。当你收到模板时, 下载模板,装载阶段将产品转换为视图树的结构,在转换完成后,表达式将被表达式引擎分析,得到正确的值。通过通过事件分析引擎分析用户定义的事件和完成事件绑定,完成事件绑定后对视图的分析分配和渲染,最后,目标页面在屏幕上显示。
图1-技术栈特点
通过图1，从性能、开发语言、渲染、包大小、社区、支持平台等,它们的主要特征都编译了;这并不造成几个问题:为什么本土和Flutter性能更好?为什么ReactNative和Weex的性能相对较差?为什么H5页的加载速度慢?如何优化这些性能问题,这是一个需要更深层次的理解的问题,下面将对基本架构、渲染过程、编译操作原理等进行综合分析。
03
基础架构介绍
3.介绍1Flutter基础设施
ABM是苹果iOS应用程序的分发渠道之一,与应用商店平台不同,ABM是一个全新的应用分配系统,于2019年10月在中国推出。有些功能与企业帐户类似,它旨在提供一种快速和高效的方式部署企业拥有的苹果设备。ABM和App Store平台的主要区别如下:
图2-Flutter结构
Google在2018年发布了Flutter 1.0，如图2所示，主要分为Framework层和Engine层；
框架层:基于达尔特实现,它主要包括文本 、 图像 、 按钮 、 动画 、 手势和各种widget,核心基础类库包,例如 io 、 async 、 ui; 基于框架的开发应用程序,它运行在引擎层上,框架和逻辑层基于达尔特语言的开发,对于开发而言，只是个小道具,Widget是UI实现的基础；Engine层：基于C++、C实现；主要包括Skia渲染引擎库、Dart Runtime、Text文本渲染库等，引擎层自包含的Skia渲染引擎,为了实现所有目的均匀的渲染,在工程层适应平台差异和跨平台支持方面,实现更完美的跨境效果;Darth代码通过AOT编译为运行平台的二进制代码。这意味着Flotter不需要桥,从逻辑方面和渲染方面完成所有功能,和原生类似。这也是其卓越表现的关键。而Android拥有Skia引擎,这也使得Android的编译输出比iOS小。除了支持移动端外，它还支持Mac OS、Windows、PC和Web接口,在新的FunchsiaOS中也支持Dart,使用Blutter作为UI框架。
为 Clutter Web,框架层是公开的,这意味着业务层可以使用该层的 Widgets来实现逻辑交叉端;但引擎层不同,通过Canvas Render或HTML Render需要与Engine同步的能力.2022年5月,GoogleIO会议发布了Blutter 3.0,除了移动端，更好的支持Mac OS和Linux平台,它还包括了一系列的其他优化和支持,大家可以多关注。
3.2对ReactNative基础设施的介绍
ABM是苹果iOS应用程序的分发渠道之一,与应用商店平台不同,ABM是一个全新的应用分配系统,于2019年10月在中国推出。有些功能与企业帐户类似,它旨在提供一种快速和高效的方式部署企业拥有的苹果设备。ABM和App Store平台的主要区别如下:
图3-反应内置架构
ReactNative於2015年在Facebook上推出。如图3所示，主要服务于Android和iOS,使用React开发实现逻辑侧码(同样适用于前端),使用Redux实现国家管理,在APP中,用户界面渲染、网络请求、动画等都是由原来的侧桥实现的,这里是实际运行的过程,死亡的js侧构成一个虚拟死亡,通过桥桥将异族结构转移到原来的侧面,将分析和映射到原始控制器,形成原型结构之后,取消显示的原始功能。
2021年,ReactNative的新版本重构了底层,重点在于更改线程模型、引入异步渲染功能、允许多重渲染和简化异步数据处理、简化JSBridge等。
3.3介绍WEEX基础设施
图4-魏ex基础设施
Weex是阿里于2016年发布的跨部门框架。如图4所示，Weex编译产品js包可以在服务端部署,应用程序已装载并运行,它也可以被看作具有动态释放能力;类似于ReactNative,在 Weex 实际 运作 期间,js边将形成一个域,通过通过最初的侧面分析,对原始控件进行映射和通过原始功能渲染;基于JSV8引擎的Weex,基于Vue设计，支持Android、iOS和Web。
3.4对WebView基本架构的介绍
图5-WebView内核基础设施
WebView内核模块较复杂，如图5所示，这里主要介绍WebView架构主要的几个部分：桥接协议是上层逻辑测与WebView的通信层，是JS和Native互相通信的能力层；
WebCore是浏览器加载和卸载渲染页面的基础,主要包括资源加载、HTML分析、CSS分析、DOM分析、布局渲染等。JavaScript引擎是一个JavaScript分析器,JavaScriptCore是一个WebkitJavaScript引擎,V8是谷歌默认的Blink引擎;WebKit Ports是WebKit的端口部分,它包括网络、字体、图片解码、音频视频解码、硬件加速等模块,还有许多第三方图书馆,包括2D图形库、3D图形库、网络库、存储库、音频和视频库等。它支持Android、iOS和Windows。
3.5编译原则的分析
Flutter支持Release、Profile、Debug编译模式。
释放模式使用AOT预编译模式,预编译为机器码，通过编译代码生成相应的架构,直接在用户设备上运行相应的机器代码,运行速度快，性能良好;此模式关闭所有调试工具,只支持真机。对于编译产物，iOS方面主要生成apps.framework和Flutter.Framework;App.framework编译了达特代码的输出,Flutter.framework是引擎编译产品,Android侧主要在lib.So和libflutter.So下添加libapp。libapp.so编译达特代码的输出,libflutter.so编译引擎的输出,不同的是在assets下增加了flutter_assets存放引用资源文件。
与 Profil 和 Release 模式类似,该模式最重要的功能是使用 DevTools 来检测应用程序性能,并进行性能调试分析。
调试模式使用JIT即时编译技术,支持常用的开发调试函数热重载,在开发调试时使用，包括支持的调试信息、服务扩展、天文台、DevTools和其他调试工具,支持模拟器和真机。iOS方面主要生成apps.framework和Flutter.framework,在App.中,框架文件夹中有许多孤立 Snapshot_data,kernel_blob.bin，vm_snapshot_data;Android方面也有越来越多的文件,但是有较少的libapps underlib.so文件。
ReactNative分为逻辑侧和渲染侧,基于js引擎的逻辑侧面,基于React的代码将编译成原始JavaScript代码,编译和生成jsbundle文件,从内部或外部运行到应用程序的末端;而渲染侧取决于Android或iOS本土渲染,相应的编译产品需要在单独的平台上编译,然后它被释放到服务端或内置于应用程序。
Weex和ReactNative相似,weex将编译源代码为js包,这些js包可以在服务端部署,在应用程序下载js包之后,通过js引擎构建虚拟世界,并将映射连接到原始世界,由原始渲染引擎渲染。
H5：以React和Vue为例，会将以框架开发的代码编译为JavaScript原生代码，即然后在浏览器或者WebView中执行；内核会先建立连接、加载资源，然后解析、排版布局、绘制渲染呈现给用户。
3.6基本渲染过程比较
图6-基本渲染过程比较
简单分析渲染流程，基于Android和iOS的应用程序开发,调用框架框架层实现顶层逻辑,基于Flutter开发的APP,在布局设计后直接调用系统渲染引擎进行渲染显示;直接调用Skia渲染引擎渲染显示;不依赖原始渲染。
基于ReactNative或Weex的应用程序开发不同,首先,商业逻辑是基于React或Weex开发的,然后你可以预先下载或下载js包到APP中,然后将虚拟世界映射到原始控制器的桥上,取消原有的渲染引擎用于渲染显示.
基于混合编程的APP开发,它需要通过前端框架如React和Vue来实现,将主页翻译成JavaScript的母语,然后通过链接到WebView或浏览器下载页面,关键过程是连接的加载 、 分析 、 编辑 、 绘制,最后,渲染引擎被重新调制并显示。
通过上述分析,我们可以回答以下问题:
为什么本土和Flutter性能更好?主要是它们在布局绘制后直接显示,或使用自驱动的渲染引擎。
为什么ReactNative和Weex的性能相对慢?主要需要下载js包,并将js dom结构分析映射到原文中,下载和预安装都花费更多的时间,并且依靠原始渲染(ReactNative的新版本升级了基本架构,据说有更大的业绩提高,大家也可以关注）。
为什么H5页的加载速度慢?主要因为连接和加载比较耗时，这里占大部分时间，连接和加载完以后基本就是WebView或浏览器本地可以完成的工作，后期优化也可以以此为切入点。
04
优化常见主要性能问题
在实际开发过程中也遇到了一些性能问题, 下面是简要的介绍.
4.1如何优化Flutter性能?
关键优化指标: 页异常率 、 页 FPS 帧率 、 页载时间.
页面异常率（异常发生次数 / 整体页面 PV 数）：通过 runZoned 与 FlutterError 两个方法，在异常拦截的方法中统计异常的发生次数和堆栈数据。
页面FPS帧率:如何收集FPS是关键的。通过在ReportTimings上注册窗口对象并召回它,你可以把整个建模和渲染过程拖延,然后计算页面FPS。
页面 लोड时间(页面可视时间-页面创建时间):页面可视时间是通过添加PostFrameCallback re调用 widgetsBinding,页面创建时间通过页面初始化方法 initState获得.
将以上数据上传到监控和性能分析平台（mPaaS和烛龙），作为以后的性能分析和优化的参考数据,在开发过程中,可通过 DevToos性能分析工具和Flutter Inspector进行性能优化分析。按需加载，局部更新也是常见的优化方法。其他性能优化,如布局加载优化、状态管理优化、启动优化-引擎预加载、内存优化、包大小优化等,不再详细。你可以更多地关注弗莱特社区,定期更新Flotter版本,会带来很好的收获。
4.2如何优化ReactNative负载慢问题?
一是可以预下载bundle包，减少包加载的时间，打开页面直接映射渲染，从而达到更快打开页面的目的，当然也可以预置包，需要平衡好包大小和性能；
二是尝试升级ReactNative最新版本，新版本升级了基础架构，主要包括线程模型，引入了异步渲染能力，优化JSBridge，对性能有明显提升（作者咨询过京东mPaaS团队，也在跟进中）。
4.3如何在APP中优化H5负载慢
图7-H5装载过程的介绍
图7描述了整个过程,从WebView初始化到H5页最后渲染,并用以前的H5对基本渲染过程进行分析。时间消耗的联系有两个主要问题,一个是WebView的初始化,您可以通过预先启动WebView来优化这个问题;其次,请求连接和资源(html、js、csspicture等)的加载,这个问题可以通过H5分离方案解决,通过资源的预加载，解决html 、 js 、 css和资源图像加载问题,这大大降低了资源的装载时间,提升页面加载性能，甚至达到第二开的效果。
05
总结
因此,如何选择技术应该被认为是提高开发效率和用户体验的先决条件,然后分析关键因素:
1.技术堆栈的基本架构是什么,原型架构是否好,是否更面向未来发展;
2.团队技术堆积的成熟度,学习成本,社区的成熟度;
3、研发效率，实现代码多端复用，减少多端差异，降低开发成本，更多地关注业务发展;提高效率是持续的收益过程,体现在商业发展的整个生命周期中。当然，新技术在实施的早期阶段会造成一些成本,但对总回报的了解是长期的;
4、是否更好解决多端一致性，更好解决UI设计师在UI审查时、测试同学在测试过程中、业务方在使用过程中发现的端与端并异问题，风格统一也是良好用户体验的重要体现；
支持动态的程度,解决出版新需求的问题,也是企业痛苦点,关键因素;
6、用户体验是最关键的，也需考虑用户的使用环境（网络环境、手机配置）等；
正式的C端项目,面对数千万甚至数十亿用户,技术选择战略必须以确保用户体验为基础,以实现调试的有效性,用户第一，用户利益最大化保障公司利益;非C端项目,在实现调试改进的基础上,可能需要考虑改进用户体验。
本文作者：京东国际技术研发部——卢旭、张公、姚峰、高鑫鹏、李澄锋、陈海蛟、高明、凡为连、单禹钦、慕新建