原生性能 初识Flutter Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 保存页面栈信息 FlutterEngine/FlutterNativeView Route Navigator 性能优化 3 性能优化 3 泄漏 内存 增量 内存 - 降低20% 引擎 图片加载 性能优化 3 分析调 试 渲染 页面渲染 - 降低20-30% 定制规 则 优先使用StatelessWidget 最小封装原则 减少build函数中过多操作 尝试将部分Widget设置为const Web 4 发展 Flutter在今年GDD大会正式发布stable 1.9，同时宣布Flutter For Web仓库正式合入Flutter主仓库 Dart编译JavaScript 移除平台模块 匹配Web特性 Flutter For Web 4 发展 Flutter For Web 4 项目改造 Alert Toast Dialog Refresh … UI 适配 App Web

3. Web App 应该更像 App 而不是一个浏览器 Tab 4. 用户并不关心背后用的是什么技术。 a. App做壳，Web做核 b. Web 会与 OS 更紧密集成，直接提供 Web引擎支持 Chrome App Launcher Chrome Apps Chrome App vs 桌面 App 技术上: ● 独立的窗口 ● 离线使用 ● 通知栏 ● App Launcher Dart VM ○ 包管理 Pub ○ Dart Editor ● Dart → JavaScript 编译器：dart2js Dart 两种运行模式 1）检查模式（checked） 检查类型匹配，及早发现问题，但性能差 T x = o 等价于 assert(o == null || o is T) 2）生产模式（production） 不检查类型，性能好 Dart 运行环境 Dart

⽅方案1： H5 WebView Hybrid WebView+Native React Native JavaScript+Native ⾃自⼰己负责渲染 WebView 跨平台的布局引擎： 转化为Native渲染 开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 跨平台 性能 WebView Hybrid Native ReactNative Xamarin

setState 通知 刷新界面 State need update InheritedWidget RichText 本地表情Icon •无支持表情/文本混排控件 •解决方案 1.修改Skia引擎渲染 2.业务层适配, 自动计算表情及文本宽度进行自适应换行 研发数据 •开发人力成本 人日 native flutter 图片库 1.34% engine ？ 0.09% richText

的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/Android/Web/Windows/Linux/macOS/Embedded

NextDisp Reducer Base Store Dispatch(action) GlobalRule 是否GlobalTask或 GlobalListener有注册 有 GlobalTask 匹配每个 Listener 无 模块Task 触发模块 Reducer 每个Listener注册 时持有模块Store NextDisp Reducer Global Store 注册分发