抖音小程序前端渲染框架演进

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.