我的Github：https://github.com/koudle 我的掘⾦金金主⻚页： https://juejin.im/usr/5b5587a05188251abb46b797 ⼩小德-koudle @Tencent 我的Github： https://github.com/koudle 我的掘⾦金金主⻚页： https://juejin.im/user/5b5587a05188251abb46b797 JavaScript+Native ⾃自⼰己负责渲染 WebView 跨平台的布局引擎： 转化为Native渲染 开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 效率太低 RN：虽然是Native渲染，但多了了 布局解析的性能损耗，⽽而且JS运⾏行行 WEB流 ⽅方案2 转化为Native渲染 Mono AOT ARM CODE IL JIT Mono C# c#：同时⽀支持JIT和AOT Xamarin：虽然性能好了了⼀一些，但是跨 平台的UI⽀支持不不好，⽆无法实现复杂的 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 Dart VM 实践框架及页面栈管理 2 混合栈管理 - 方案 Native FlutterController GPU、IO、UI Dart VM Native页 Flutter页 Flutter页 Flutter页 实践框架及页面栈管理 2 混合栈管理 FlutterVC/Activity FlutterVC/Activity FlutterVie w FlutterVie 2 腾讯企鹅辅导 Live Widget Todo Widget Course Widget Tab Widget 上课页 实践框架及页面栈管理 2 腾讯企鹅辅导 Widgets CSSender Navigator MJFlutter 上课页 WNS UrlScheme Native Serve Data Callback Data Bind 实践框架及页面栈管理

Flutter NOW Version1.0 动态搜索页 Flutter NOW Version2.0 首页关注tab Flutter NOW Version3.0 房间页 2018.4 2018.11 2019.2 Flutter 独立 APP 保密 & 2019.5 Flutter实现的页面 动态页 三级页面 关注页 首页 房间 核心页面 系统框架 MessageChannel setState 通知 刷新界面 State need update InheritedWidget RichText 本地表情Icon •无支持表情/文本混排控件 •解决方案 1.修改Skia引擎渲染 2.业务层适配, 自动计算表情及文本宽度进行自适应换行 研发数据 •开发人力成本 人日 native flutter 图片库 1.34% engine ？ 0.09% richText uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 动态更新 •Android原生支持 •iOS Release版本不支持 •iOS系统无法在运行时将内存页 标记为可执行 Android构建产出 iOS构建产出 Dart Project Android终端 iOS终端 应用更新 动态更新 •下发JIT编译产出 •牺牲性能 •仅适用于体验要求不高页面

亚秒级，有状态的热重载 原⽣生性能 渲染⽅方式、AOT、⽆无锁GC 统⼀一的应⽤用开发体验 两端⼀一致的开发⽅方式，MD和iOS⻛风格 闲⻥鱼 - 让你的闲置游起来 Flutter 快速开发 - Hot Reload 闲⻥鱼 - 让你的闲置游起来 Flutter在闲⻥鱼应⽤用过程 基础调研 Google⽀支持 混合开发 详情⻚页 发布⻚页 更更多业务 内部版本 Alpha Beta 接⼝口服务 - 业务逻辑 闲⻥鱼 - 让你的闲置游起来 RT 单机QPS 系统资源 运⾏行行时⻓长 Dart Server ⽣生产环境情况 达到⽣生产稳定性，性能满⾜足“胶⽔水层”需求 闲⻥鱼详情⻚页所有流量量由Dart Server服务 闲⻥鱼 - 让你的闲置游起来 能否做到像写客户端⼀一样写服务端？ 怎么快速找到后端服务，服务简单调⽤用？ 尽量量少考虑运维的问题。 让Flutter客户端同学快速上⼿手

JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 UI渲染方式 性能 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持

使用 React 构建 Flutter 应用 探索新一代渲染技术 Kraken • 2011 - 2013年 • WebQQ • QQ • 手机 QQ • 2014年 - 现在 • 淘宝交易线产品 • 淘宝中后台产品 • 淘系无线架构、中后台架构 https://github.com/yuanyan 元彦 淘系前端团队 天猫未来店 GCanvas C++ Engine Vue.js VDOM Dart Native View Tree (OEM) Layout Tree DOM Tree JS VDOM Layer Tree Layer Tree 渲染技术探索 Dart JavaScript JavaScript JavaScript WORE ??? ?? WORE ??? LORE ?? (Learn One Run Everywhere) Built-in Features ? ? (14) ? (10) ? (9) ? (13) 为什么 ❤️ Flutter Web Flutter Flutter 是 Web 之外的另一个真跨端渲染技术 ? ? ? 通过 platform channels 调用平台能力 支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS

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

Templates ● 脚手架 ● 惰性的 DOM 块，稍后需要时再激活 ● 解析，但不渲染 ●