1、闲鱼Flutter应用实践闲鱼为什么使用FlutterFlutter与Native混合开发实践Hybrid工程实践-研发时Hybrid栈管理-运行时Hybrid页面组件Flutter通用问题实践详情页页面框架图片缓存注意事项线上Crash率详情页性能对比上线效果小结Flutter，一种新的可能性or性能动态性FlutterPhoneGapReactive NativeWeex高性能方案原理AOTJITMachine CodeScript/BytecodeRelease模式开发模式快速、可预测更快的开发周期高性能 60FPS编程很好的两端一致性SkiaLinear layout,paint St

2、ructural RepaintingDart复杂交互No JS BridgeOpenGL/Vulkan/Metal闲鱼商品详情页面(Flutter)混合栈Native组件视频多图动画盖楼闲鱼为什么使用FlutterFlutter与Native混合开发实践Hybrid工程实践-研发时Hybrid栈管理-运行时Hybrid页面组件Flutter通用问题实践详情页页面框架图片缓存注意事项线上Crash率详情页性能对比上线效果小结Flutter Hybrid工程实践Flutter默认工程结构Hybrid工程的问题iOS(git&cocoapods)Android(git&gradle)iOS(git

3、&cocoapods)Android(git&gradle)Flutter(git&pub)已有工程目录Flutter工程目录?如何基于现有工程搭建？如何支持过渡期的Flutter&Native双开发模式？如何与现有构建工具集成？工程结构&双开发模式以前的工程新的工程(Flutter&Native/Weex)iOS(git&cocoapods)Android(git&gradle)Flutter App Repo(pub)iOS(git subm&cocoapods)Android(git subm&gradle)Flutter(git submodule)Flutter TeamiOS(gi

4、t&cocoapods)Android(git&gradle)Native/Weex TeamFlutter产物Submodule引入现有工程Flutter中间产物拆解Flutter构建逻辑，修改gradle和pods脚本Hybrid工程修改点Flutter(?branch&subm)Flutter?iOS?Android(subm)App?flutter.jar(libflutter.so)vm/isolate_ snapshot_instr/data?flutter_assetsengine?repoengine.version?flutter?engine(xianyu branch)?

5、flutterflutter toolsflutter testdart sdksky_engineengine artifacts?Dart Packages?Flutter Plugin?Pub Server1Pub Server2?iOS?podspecaar?snapshot_assembly.s?snapshot_assembly.o?official bugfix?Android?Android?Flutter?flutter_tools?flutter_toolsgradle?Engine编译（如ARMv7）构建优化私有仓库双开发模式混合调试MTL打包闲鱼iOS工程修改示例修改工

6、程名为Runner(包括主代码文件夹)修改Podfile以处理Flutter相关逻辑添加Flutter目录，并指定Runner的Debug Config为Flutter/Debug.xcconfig，Release.config为Flutter/Release.xcconfig修改Runner的Build Phases添加xcode_backend.sh用于拷贝Flutter.framework，构建App.framework(如果Debug还有snapshot_blob.bin)，以及构建后的thin.嵌入App.framework和Flutter.framework(对应代码+引擎)嵌入f

7、lutter_assets(资源等)闲鱼Android工程修改示例添加包文件夹android/app/src/main以存储GeneratedPluginRegistrant.javalocal.properties存储Flutter相关信息引入flutter.gradle闲鱼Android支持armeabi修改flutter.gradle，将arm64的处理同arm修改libflutter.so目录结构为lib/armeabi/libflutter.so修改Android启动Activity启动逻辑以保证多个Launchable-Activity的时候的正确启动。Flutter Hybrid

8、栈管理Hybrid栈管理定义Page1 Native Page2 Flutter Page3 Flutter Page4 Native Page5 Flutter Flutter默认栈管理FlutterActivityBuildContextFlutterViewFlutterNativeViewNavigatorrouterouteroutehistory routesRoutePageBuilder?buildPageFlutter Frameworkpush()pop()remove()replace()Platform自管理栈单实例 /多实例两种方案的比较FlutterActivity

9、FlutterActivityFlutterActivityPage1Page2Page3dart vmshellplt,ui,io,gpushellplt,ui,io,gpushellplt,ui,io,gpuFlutterNativeViewFlutterViewFlutterViewFlutterViewFlutterActivityFlutterActivityFlutterActivityEnginePage1Page2Page3方案二方案一更快的加载速度数据多页面复用更简单页面隔离性好方案二实现?BuildContextNavigatorrouterouteroutehistory

10、 routesRoutePageBuilder?buildPageFlutter Frameworkpush()pop()remove()replace()?OpenURL?RouterFlutterView(CAEAGLLayer)FlutterViewControllerXFlutterViewController?RootVCNativeVC1(Page1)FlutterWrapperVC1(Page2)NativeVC(Page3)FlutterWrapperVC4(Page4)?RootActivityNativeVC1(Page1)FlutterWrapperActivity1(P

11、age2)NativeVC(Page3)FlutterWrapperActivity4(Page4)ChannelRenderSurfaceViewXFlutterView?Channel?FlutterViewRenderActivity剥离转场动画单例移动内部栈跟随Native托管栈OpenUrl支持Hybrid页面组件Texture自定义视频播放器参考:https:/ Texture自定义视频播放器Flutter-Render(layer_tree)Rasterizer-Draw(layer_tree)LayerTree-Paint()ContainLayer TextureLayer

12、OtherLayer OtherLayer SKCanvas-Draw FlutterFI建_前屏幕ua下xlayer_tree，并调用Render渲染 Rasterizer RE统GPUGlK概念不一n，这里其U就g一个layer_treex渲染(Paint 并呈v(Present S屏幕上x过y Layer)reeg一个渲染m，Paint方r将会递归x遍L每一个节s并e行节sxPaint方r)extureLayerg一个t殊xLayer叶T节s，调用通过不P平台xUv可以UvExternal_)exturex渲染 dixLayer最z都g调用(KIAxCanvas来Uv渲染，我CxExte

13、rnal_texture，会封装成一个(KImage，A给(KCanvas渲染。使用TextureLayer参考video_player插件：https:/pub.dartlang.org/packages/video_playerTexture对接自定义视频播放器1:设置一个EventChannel，用于向Flutter通知视频状态变化2:设置一个MethodChannel，用于控制video player3:设置一个FlutterTexture，用于显示视频帧4:从Native播放器中提取出video frame，贴到FlutterTexture.复用Native组件FlutterNati

14、vePlatform Channels注意Layer冲突问题新建Window或者Activity装载Native组件开天窗？还没成功闲鱼为什么使用FlutterFlutter与Native混合开发实践Hybrid工程实践-研发时Hybrid栈管理-运行时基于Texture对接自定义视频组件Flutter通用问题实践详情页页面框架图片缓存注意事项线上Crash率详情页性能对比上线效果小结Flutter详情页页面框架页面框架简单的页面：动态组装能力InheritedWidget共享数据统一协议（下页详述）更复杂的交互页面：考虑ReduxStreamDataServer?DataBindProvid

15、er(InheritedWidget)?WidgetsList?DataBindProvider.of(context).dataBindchildchildrenhold统一协议Mirror(反射)?Flutter(Dart)JavaDO?templateAndroid?IOS?templatetemplateServerTree shaking不支持反射class PCommentReplyRes 用自动化代码工具减少Json反射工作量图片缓存图片缓存方案当前默认的图片缓存策略（官方在优化中）：“class ImageCache Implements a least-recently-us

16、ed cache of up to 1000 images.The maximum size can be adjusted using maximumSize.”问题：内存占用，容易Crash图片缓存方案方案1，只有单页面时，简单处理方案：class XWidgetsFlutterBinding extends WidgetsFlutterBinding override ImageCache createImageCache()ImageCache cache=new ImageCache();cache.maximumSize=110;/the maximum size of cache

17、d images.return cache;方案2，官方正在开发中的基于空间大小的缓存参考：https:/ set maximumSize(int value)=set maximumSizeBytes(int value).1，修改最大缓存图片的数量，提供自定义Cache的Hook点2，图片尺寸自适应剪裁图片宽度统一泛化为一系列标准尺寸，如 60,128，234 640,720,960,WebPQuality方案3，增加磁盘缓存：共用Native图片库磁盘缓存优点：简化磁盘缓存管理逻辑，可复用Native逻辑内存缓存还在Flutter端可以为多图传输提供便利闲鱼为什么使用FlutterFlu

18、tter与Native混合开发实践Hybrid工程实践-研发时Hybrid栈管理-运行时基于Texture对接自定义视频组件Flutter通用问题实践详情页页面框架图片缓存注意事项线上Crash率详情页性能对比上线效果小结问题收敛内存问题icu dat问题视频兼容问题截图问题armv7问题字体问题 早期的问题：User Crash率：百分之一小于 万分之一统计基准用户数：数百万达到生产稳定性Flutter相关问题处理思路构建问题观察日志(打开flutter 插件中的verbose logging)调试flutter_tools考察flutter.gradle/xcode_backend.sh是

19、否OK页面异常或者Crash考虑FlutterView/FlutterViewController生命周期是否正常考察产物是否正常符号化后定位问题gitter聊天室和github issuesFlutter相关问题处理思路阅读和修改源代码flutter插件相关查看https:/ 4.x,5.x iPhone 5c,6s 注：高端机型区分不明显AndroidLenovo 4.4.4Lenovo 4.4.4NativeFlutterCPU16.125.43dvm memory55.0090.83native memory96.5091.43total memory152.00182.58FPS42

20、.6032.62SM2.331.14Oppo 4.3NativeFlutterCPU32.0026.02dvm memory111.71289.10native memory104.0094.07total memory216.14383.60FPS16.9730.46SM4.7838.56Xiaomi 5.0.2NativeFlutterCPU32.327.31dvm memory228.00111.86native memory134.00130.80total memory362.00242.57FPS22.1344SM17.6858.29Huawei 7.0NativeFlutterC

21、PU16.747.91dvm memory395.92197.08native memory143.00233.24total memory539.08431.05FPS38.2246.2SM45.7858.09iOSiphone 5c 9.0.1NativeFlutterCPU50.27%47.3%Memory149.4127.28Traffic total2934916757FPS39.7153.08GPU4.36%8.78%iphone 6s 10.3.2NativeFlutterCPU30.31%27.42%Memory247.24231.66Traffic total2486817686FPS47.4750.08GPU21.89%26.25%注：以新老商品详情页为测试对象，相同的研发团队和相似的开发周期。小结效果成本成熟度