Flutter的原理及美团的实践(下)

  • 时间:
  • 浏览:0
  • 来源:彩神大发时时彩_神彩大发时时彩官方

开发Flutter应用必须使用Dart语言,Dart一种生活 既有静态语言的型态,也支持动态语言的偏离 型态,对于Java和JavaScript开发者来说门槛都有高,3-四天可不要能快速上手,合适 1-2周可不要能熟练掌握。

Flutter和原生性能对比

在开发全品类页面的Flutter版本时朋友也深刻体会到了Dart语言的魅力,Dart的语言型态使得Flutter的界面构建过程也比Android原生的XML+JAVA更直观,代码量也从从前的900多行减少到30000多行(排除掉引用的公共组件)。Flutter页面集成到App后APK体积合适 会增加5.5MB,其中包括3.3MB的SO库文件和2.2MB的ICU数据文件,此外业务代码13000行编译产物的大小有2MB左右。

朋友最关心的有一个页面性能指标而是 页面加载时间和页面渲染传输速率。测试页面加载传输速率可不要能直接使用美团结构的Metrics性能测试工具,朋友将页面Activity对象创建作为页面加载的很久开始时间,页面API数据返回作为页面加载很久开始时间。

实在使用原生实现(左)和Flutter实现(右)的全品类页面在实际使用过程中几乎分辨不在 来:

Flutter目前仍居于早期阶段,也还这么发布正式的Release版本,不过朋友看一遍Flutter团队无缘无故在为你你这个目标而努力。实在Flutter的开居于态不如Android和iOS原生应用这么性心智早熟是什么是什么 图片 图片 期图片 图片 ,其他常用的繁杂控件还必须另一方实现,有的甚至会比较困难(比如官方尚未提供的ListView.scrollTo(index)功能),但会 在高性能和跨平台方面Flutter在众多UI框架中还是有很大优势的。

可能Flutter的UI逻辑和绘制代码都有在主程序运行执行,Metrics原有的FPS功能无法统计到Flutter页面的真实具体情况,朋友必须用特殊办法来对比一种生活 实现的渲染传输速率。Android原生实现的界面渲染耗时使用系统提供的FrameMetrics接口进行监控:

Flutter一种生活 的型态适合追求iOS和Android跨平台的一致体验,追求高性能的UI交互效果的场景,不适合追求动态化部署的场景。Flutter在Android上可可不要要能实现动态化部署,但会 可能Apple的限制,在iOS上实现动态化部署非常困难,Flutter团队也正在和Apple积极沟通。

原文作者:美团技术团队

原文链接:https://zhuanlan.zhihu.com/p/4173230003

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/4743300063000

但会 朋友还必须在性能方面有有一个比较明确的数据对比。

300000帧(3000次×3000帧每次)中Android原生总平均値为10.21ms,Flutter总平均値为12.28ms,Android原生实现总丢帧数851帧8.51%,Flutter总丢帧987帧9.87%。在原生实现的触摸事件避免和过度绘制充分优化的前提下,Flutter完整版可不要能媲美原生的性能。

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/4743300063000

即可得到每帧绘制时真正消耗的时间。测试时朋友将一种生活 实现的页面分别打开3000次,每次打开后执行两次滚动操作,使其绘制3000帧,将这3000帧的每帧耗时记录下来:

Android原生实现和Flutter版本都有在页面打开的前5帧超过16ms,刚打开页面时原生实现必须创建小量View,Flutter也必须创建小量Widget,后续帧中可不要能重用大偏离 控件和渲染节点(原生的RenderNode和Flutter的RenderObject),统统 启动时的布局和渲染操作都有最耗时的。

从有一个实现的页面分别启动300多次的数据中可不要能看一遍,原生实现(AllCategoryActivity)的加载时间中位数为210ms,Flutter实现(FlutterCategoryActivity)的加载时间中位数为231ms。考虑到目前朋友还这么针对FlutterView做缓存和重用,FlutterView每次创建都必须初始化整个Flutter环境并加载相关代码,多出的20ms还在预期范围内:

Flutter在Framework层必须取到每帧中UI操作的CPU耗时,GPU操作在Flutter引擎结构实现,统统 要修改引擎来监控完整版的渲染耗时,在Flutter引擎目录下src/flutter/shell/common/http://rasterizer.cc文件中加进去去:

将测试结果的3000次启动中每帧耗时取平均値,得到每帧平均耗时具体情况(横坐标轴为帧序列,纵坐标轴为每帧耗时,单位为毫秒):