飞猪跨端容器建设与思考
如果无法正常显示，请先停止浏览器的去广告插件。
1. Flugy in Fliggy ⻜猪跨端容器建设与思考
⻜猪用户技术 / 旅鹤 & 承荫
2.
3. 分享大纲
• ⻜猪跨端技术背景与挑战
• 跨端标准化基建
• ⻜猪 Web on Flutter 容器建设
• 未来展望
4. 分享大纲
• ⻜猪跨端技术背景与挑战
• 跨端标准化基建
• ⻜猪 Web on Flutter 容器建设
• 未来展望
5. ⻜猪跨端技术的背景和挑战
1. 前端的性能优化和客户端的动态性建设让两端逐渐走向借鉴和合作
2. 跨端技术实质是在「性能体验」与「研发效率/动态性」间找寻更佳平衡点的过程
3. 自渲染容器似乎是各个 App 不约而同的结果，但对需要跨端的业务开发确是痛苦不堪的
前端视⻆
客户端视⻆
研发效率
动态性
性能体验
H5
Hybrid
小程序
RN/Weex
动态模板
Flutter
Native
6. ⻜猪跨端技术的背景和挑战
1. 各 BU App 平均接入和维护 3.15 套跨端方案，对应 2.75 套研发框架，80% 以上 BU 对渲染容器存在定制化诉求
2. ⻜猪业务⻚面至少投放 5个 App， 编写 3 套代码，适配各个渲染容器
3. 多容器多解决方案多 DSL 给业务开发带来极高的成本，本质来说是自渲染容器缺少标准的约束
React Rax Vue 小程序DSL Remax ……
Webview Flutter Weex Cube AJX 小程序
支付宝 淘宝 ⻜猪 饿了么 淘特 微信
高德 UC 优酷 天猫 咸⻥ 字节
7. 分享大纲
• ⻜猪跨端技术背景与挑战
• 跨端标准化基建
• ⻜猪 Web on Flutter 容器建设
• 未来展望
8. 跨端标准化基建
业务项目
统一研发框架（JSFramework）
标准化容器（Web子集BOM/DOM/CSSOM）
渲染容器
Weex AJX CUBE
淘宝 高德 支付宝
遵循W3C规范，以Web标准的方式进行跨端标准化建设
Flugy
⻜猪
9. 跨端标准化基建 - 标准化容器
目标：构建能力⻬平的多端渲染容器
核心：制定和推进渲染容器分层标准落地
• CSS 标准
• Web API 标准
• 桥通道标准
10. 跨端标准化基建 - 标准化容器
容器自有规范
W3C标准规范
标准规范子集
高性能标准子集
遵循W3C和WHATWG标准的子集分层
11. 跨端标准化基建 - 标准化容器
CSS
M0：133 条 CSS 属性
M1：5 条 CSS 属性
基于 W3C 标准子集
Web API
M0：20 个 API 的 178 个属性
M1：11 个 API 的 82 个属性
基于 W3C/WHATWG 标准子集
桥通道
支持异步/同步调用协议
统一桥通道 API 设计
12. 跨端标准化基建 - 统一研发框架
业务框架
Vue
Rax
Remax
小程序DSL
DX XML Dart
DinamicX Flutter
构建
Weex
Bundle
构建产物
JS Bundle
小程序
Bundle
部署
渲染容器
Weex
AJX
Webview
Cube
多DSL方案，让业务开发者在选型和维护上耗费巨大精力
13. 跨端标准化基建 - 统一研发框架
Rax
Driver
Spec
机制
Driver-dom Driver-weex Driver-server Driver-miniapp
Webview/Flugy Weex NodeJS 小程序
implement
Weex Driver
14. 分享大纲
• ⻜猪跨端技术背景与挑战
• 跨端标准化基建
• ⻜猪 Web on Flutter 容器建设
• 未来展望
15. Flugy - ⻜猪Web On Flutter 实践
WebView Web on Flutter
• ⻓列表性能/复杂交互体验问题 • 继承 Flutter 优点（性能，一致性）
• 系统 WebView 兼容性/一致性问题 • 提升 Flutter 动态性能力
JS Bundle
前端优势
完备生态
Flugy
动态能力
高性能
Flutter
跨端
WebView
Flutter优势
Bridge
GPU
渲染一致性
Foundation
Video
Audio
将Web代码运行在Flutter引擎上
WiFi
GPS
Sensor
16. Flugy 渲染过程
JS Bundle
渲染指令
Flutter Widget Tree
Flutter渲染上屏
17. Flugy - 流程图
Web
Web API
Web 代码
构建
Element
Flutter
Flugy
Eval JS
JS Bundle
CSS
调用 JS 方法
V8/JSC 调用 Dart 方法
JSI 调用 JS 引擎
Dart FFI
Binding
Flutter
扩展组件
Web API
渲染指令
Flutter
Framework
CSS 解析
Element
Render Engine
Framework
生成widget
Engine
Embedder
事件回调
Android
iOS
18. Flugy 实现原理 - DOM 树映射
DOM树
构建指令
Widget树
createElement(body)
body
createElement(div)
BodyWidget
createElement(span)
body.appendChild(div)
div
span
body.appendChild(span)
DivWidget
还记得Flutter是响应式框架吗
setState
[]
State
Children
更新渲染
⻚面
SpanWidget
19. Flugy 实现原理 - CSS 映射
让我们来实现一个如下图的效果吧：
构建
CSS
Style
03 固顶的文字
Positioned
渲染指令
createElement、appendChild等
Align
Container
01 卡片容器
Stack
Container
02 背景图
Container
DecorationImage
NetworkImage
卡片定位模式：position
Text
定位：top、left
文字对齐方式：text-align
背景色：background-color
边框：border
圆角：border-radius
文本颜色：color
字体大小：font-size
卡片宽高：width、height
图片宽高：width、height
图片填充模式：background-size
图片地址：background-image
04 底部对齐的价格
Flex
Expanded
排列方向：flex-direction
副轴对齐方式：align-items
弹性空间分配：flex
20. Flugy 实现原理 - CSS 树映射难点 1
P o s i ti on
DIV
在遇到脱离文档流的复杂情况时，不仅影响到
自身定位，同时会影响到父容器中后续子元素
的排布，这种不稳定的关系给属性映射带来非
非定位 DIV
DIV
常大挑战
当解析到脱离文档流的元素，在原父元素中
D元素
D元素
非定位 Div
占位；另外创建“副本”，向上寻找目标父容
器，找准位置，通过实现高效的通讯组件，
D元素 占位
优化组件查找效率
D 元素
position：static
D 元素
Position：absolute
21. Flugy 实现原理 - CSS 树映射难点 2
O ve r f l o w ：visibl e
Web 中子元素可以比较灵活的设置成可超出
父容器边界，而 Flutter 中 Overflow 有诸
O v er f l ow ： v i s i b l e
多限制满足不了 W3C 标准
实现自定义的RenderObject支持
O v er f l ow ： v i s i b l e
overflow：visible，并封装成相应的
Widget组件，各种容器类组件都有其对应扩
展组件，例如CssScrollView,CssFlex,
CssWrap
子元素显示超出父容器边界
Widget Tree
22. Flugy 实现原理 - CSS 树映射难点 3
A n i ma tio n
Web 中动画属性简单灵活，对容器的解析和
构建提出了不小的挑战
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
先与元素原本属性做匹配，筛选出需要做动画的属性，根据 css 的动画
百分比，创建一组动画对象，通过 AnimatedContainer 实现动画
23. Flugy 的性能优化 - 1
列表 优化
映射 Web ⻚面布局，通过 SingleChildScrollerView 模拟
Web 滑动列表，会在滑动过程中不断触发每个子元素的重绘，引
起滑动卡顿
1
1
2
RePaint
Boundary
2
3
4
5
3
6
4
5
6
1.根据场景合理使用RePaintBoundary，通过新建图层，减少不
必要的重绘，提升滚动性能
2.定制列表组件，映射到Flutter List组件，具备更高的滚动性能
24. Flugy 的性能优化 - 2
滑 动 插 值器优 化
在 Flutter 中为了模拟现实世界的物理运动，使用 Simulation 来计算惯性滑动过程中
的滚动offset，而当⻚面有卡顿时（丢1帧，dt2 = 1/60*2），计算出的滚动offset会
放大，从而加剧了视觉上的顿挫感
自定义改造 Simulation，固定
时间间隔在1/60 s，在惯性滚动
上，视觉体验上会有比较大的提
升，对帧率没有影响
25. Flugy 的性能优化 - 3
圆⻆ 性能 优化
div 元素设置了 overflow:hidden ，在属性映射上 Flugy 会对容器类 Widget 设置
clipBehavior 属性，可能会导致 ClipPathLayer 的创建或者 saveLayer() 的调用，
这些都会产生性能消耗
优化方案：用 DecorationImage 来展示
帧率 UI耗时(ms) Raster耗时
(ms)
ClipPath实现
圆⻆ 21 9 31
非ClipPath实
现圆⻆ 38 8 13
图片，通过外层 Container 的
Decoration 来配置实现圆⻆功能
注：限制开启父元素的剪裁特性，通过给
父元素和子元素都加上圆⻆能对应到上面
优化分支，对前端开发有一定限制
某低端手机性能表现
26. Flugy 的性能优化 - 4
N SR
Flutter渲染速度非常快，通过提前加载JS Bundle，缓存
生成好的Flutter Widget，可以实现直出的渲染效果
NSR 预加载流程
加载URL
生成渲染指令
预构建Widget Tree
缓存NSR
Widget Tree
加载 NSR
加载 URL
绑定PreNSR⻚面
NSR 缓存？
获取缓存的NSR
WidgetTree
绑定⻚面
27. Flugy 的整体架构设计
28. 分享大纲
• ⻜猪跨端技术背景与挑战
• 跨端标准化基建
• ⻜猪 Web on Flutter 容器建设
• 未来展望
29. 展望
挑战型
• 计划在一款小型 App 全面落地 Flugy，验证方案的可靠性 ，对标 WebView
• Flutter 混合开发深度探索，通过 Flugy 结合 Dart 和 JavaScript 技术栈，兼顾性能和动态性，找到最佳实践
承诺性
• 多端小程序方向，通过一码多端，发布平台建设减小多端部署的成本
• 渲染引擎方向，和 UC 内核合作，对 H5 ⻚面性能做针对性优化，例如⻓列表滚动
30. Thanks
欢迎加入⻜猪旅行
客户端：lvhe.zc@alibaba-inc.com
前端：hengfei.whf@alibaba-inc.com
31. 副标题