抖音小程序前端渲染框架演进
如果无法正常显示，请先停止浏览器的去广告插件。
1. 砥砺前行
—— 抖音小程序前端渲染框架演进
抖音小程序前端渲染负责人 — 薛英琛（嘤嘤）
2.
3. 目录
CONTENTS
01
小程序渲染背景介绍
02
渲染框架设计思考
03
渲染优化技巧
04
性能工具与调优
4. 01
小程序渲染背景介绍
5. 抖音小程序是什么？
抖音小程序
6. 小程序运行时架构
小程序 JS 运行时，提供组件、API、渲染等
核心能力
JSSDK
跨端信
道
Nativ
e 运行
时
接入宿
主
多端通信手段
Android or iOS or IOT，提供⻚面堆栈与端
能力
抖音、头条、⻄瓜等，提供小程序运营环境
与管理能力
7. 小程序运行流程
下发
01
编译
02
运行
03
加载
04
8. 小程序渲染背景
开发者
内部
9. 内部维护需要
调试与测试
开发成本与效率
性能优化空间
10. 外部开发能力
小程序语法一致性
双线程渲染模型
UI 可测试性
极致的渲染性能与体验
11. 痛苦の现状
内置组件
DOM 生命周期
自定义组件
自定义生命周期
Slot 抽象
原生事件
合成事件
Polymer
Virtual-DOM
小程序渲染
12. 最重要的一点
统一的组件化机制
统一的组件化机制
统一的组件化机制
13. 02
框架设计与思考
14. 为什么不用 XXX？
轻量，可插拔
01
01
03
高度可定制性
03
02
02 独立绘制
04 性能优化空间
04
15. 框架设计迷思
能力提供
渲染机制
场景
状态管理
16. 前端渲染机制
JSX vs template
趋势：AOT
17. 数据流与状态管理
听
监
更
变
a
t
a
d
set-
新
更
式
流
现
发
更
变
18. 变更监听
19. set-data
20. 流式更新
21. 变更发现
22. 我们的选择
小孩子才做选择
渐进式编译优化 + set-data + 运行时配置
23. 外部开发能力
24. 外部开发能力
25. 内部维护需要
26. 03
渲染优化技巧
27. ChildFlag
结构稳定性
28. ChildFlag
HasInvalidChildren
HasTextChildren
HasVNodeChildren
HasNonKeyedChildren
HasKeyedChildren
3x
29. ChildFlag
30. ChildFlag
31. VNode Immutability
32. Benchmark
33. 04
性能工具与调优
34. 小程序性能分析工具
A
IDE 性能 trace 工具
客户端性能分析工具
IDE 性能评分工具
35. 客户端性能分析工具
36. IDE 性能 trace 工具
37. IDE 性能评分工具
38. 小程序性能分析工具对比
工具
客户端性能分析工具
IDE 性能 trace 工具
IDE 性能评分工具
A
优点
1.操作简单，扫预览码打开
调试即可
2.真机数据
1.数据详细
2.真机数据
C
缺点 适用场景
1. 数据指标少 1. 快速验证常规指标
1. 操作相对复杂 1. 细粒度分析启动性能
1. 操作简单，可以快速得到 1. 只能暴露有限的问题
粗略的优化点
2.
IDE 数据
1.上线前性能检测
2.本地快速得到粗略优化方向
39. stand in awe
保持敬畏
40. Q & A
41. yingchenxue@gmail.com
www.zhihu.com/people/yingyingxue
42.
43.