基于Flutter的Canvas探索与应用
如果无法正常显示，请先停止浏览器的去广告插件。
1. 基于Flutter的Canvas探索与应⽤用
讲师：万红波(花名：远湖)
2. 个⼈人介绍
• 万红波，花名远湖。淘系技术部⽆无线开发
专家。
• 主要从事浏览器器内核以及渲染引擎⽅方向的
研究。2018年年⼊入职阿⾥里里巴巴淘系技术部，
主要从事Flutter，⼩小程序渲染引擎相关⼯工
作。⽬目前在AliFlutter团队主要负责底层引
擎以及Canvas相关研究与应⽤用
3. 本次分享您将会了了解到：
* ⼿手淘中⼩小程序如何利利⽤用flutter引擎提⾼高互动游戏的交互体验
* ⼿手淘利利⽤用flutter作为跨平台的独⽴立渲染引擎的探索
4. ⽬目录
• 业务背景
• 业务痛点
• 解决⽅方案
• 技术改造
• 业务效果
• 未来规划
5. 业务背景
⼩小程序作为⼀一个商业化解决⽅方案，这⼏几年年发展迅速，在头部app中占据重要位置
与传统H5相⽐比，其技术特点：
1. 渲染和逻辑分离到独⽴立线程，
通过消息进⾏行行通信
2. 并⾏行行化
3. 安全可控，受约束环境
⼩小程序客户端运⾏行行时架构
6. 业务痛点
⼩小程序的架构给互动游戏业务带来的痛点：
业务通常使⽤用Canvas API进⾏行行每帧的绘制，每⼀一帧通常包含⼤大量量的绘制操作，worker和render通信频繁，渲染性能⼤大幅降
低，⽤用户体验较差
worker->render通信的基本链路路：
1. worker线程执⾏行行drawXXX绘制命令
2. native层拦截到该js api，对该指令进⾏行行序列列化，并封装为消
息，发送给render线程
3. render线程将消息反序列列化，转换为绘制指令的字符串串。
4. 通过evaluateJavaScript在webview中执⾏行行绘制字符串串，最后通
过webview渲染
7. 解决⽅方案（1/4）
在⼩小程序worker环境中直接对接渲染引擎，缩短渲染链路路，减少
通信消耗，提⾼高渲染性能
8. 解决⽅方案（2/4）
独⽴立2D渲染引擎⽅方案：flutter引擎
Flutter渲染流⽔水线：
Flutter线程模型：
选择Flutter的原因：
1.跨平台
2.⾼高性能
3.Skia
9. 解决⽅方案（3/4）
Flutter原⽣生渲染管线
10. 解决⽅方案（4/4）
我们的⽅方案：
1.⾯面向业务，提供标准Web Canvas API
2.通过业务容器器引⼊入JS引擎，并把C++实现的Canvas API
通过binding⽅方式，注⼊入到⼩小程序worker线程
3. 引⼊入Canvas模式渲染管线，和原⽣生dart模式共存。
11. 技术改造（1/3）
渲染流⽔水线改造
1.
2.
3.
4.
系统发出Vsync信号后，调度到worker线程
在worker线程中业务执⾏行行具体的2D绘制操作
绘制操作的指令⽣生成LayerTree
提交LayerTree到GPU线程进⾏行行光栅并上屏
12. 技术改造（2/3）
Canvas渲染管线
13. 技术改造（3/3）
图⽚片加载流程改造
14. 业务效果 (1/2)
在Android低端机上，业务改造前后
⼩小程序进程数据对⽐比：
注:
1. FPS数据由于运动银⾏行行业务没有通过Vsync
来驱动绘制，⽽而是直接通过timer来驱动，使
得CPU占⽤用率较⾼高，且改造后FPS提⾼高很
⼤大。
2. 如果采⽤用VSync来驱动绘制，通过线下测
试，改造后FPS提⾼高30%左右
改造后
改造前
15. 业务效果 (2/2)
1. ⽀支持Lottie动画
2. ⽀支持⽩白鹭游戏引擎
16. 未来规划
1. 接⼊入更更多三⽅方游戏引擎
•
和三⽅方游戏引擎深度合作，探索⾼高阶渲染API的实现
2. ⽀支持WebGL API
3. 探索独⽴立⼩小游戏容器器
17. 【淘系技术】微信公众号
加⼊入我们
yuanhu.whb@alibaba-inc.com
扫码获取本期ppt内容及回放