基于数据建模的高性能弹幕设计解决方案

1. 基于数据建模的⾼高性能弹幕设计实践银国徽字节跳动视频架构前端负责人

2.

3. ⾃自我介绍字节跳动资深前端开发工程师，现负责视频架构前端团队。2016 年加入字节跳动，一直在负责广告投放、音视频相关内容。先后主导了自研西瓜音视频播放器及周边系统架构设计、核心开发和开源工作，在 Web 音视频领域积累了一定的经验，申请算法专利几十项。

4. ⽬目录 1. 弹幕的场景分析 2. 数学建模之虚拟轨道思想与“碰撞检测” 3. 弹幕的并发调度设计 4. 动画渲染&内存优化 5. Q&A

5. 弹幕的场景分析 VOD LIVE 弹幕场景

6. 弹幕的场景分析实时性不不确定性弹幕特性复杂性

7. 弹幕的场景分析字号弹幕1 颜⾊色弹幕2 弹幕3 宽度不不遮挡弹幕5 场景分析弹幕4 ⾼高度

8. 数学建模之虚拟轨道思想与“碰撞检测” 弹幕示意图

9. 数学建模之虚拟轨道思想与“碰撞检测” 传统⽅方案⼀一

10. 数学建模之虚拟轨道思想与“碰撞检测” 传统⽅方案⼆二

11. 数学建模之虚拟轨道思想与“碰撞检测” 改进⽅方案

12. 数学建模之虚拟轨道思想与“碰撞检测” 数学模型会帮助解释⼀一个系统，研究不不同组成部分的影响，以及对⾏行行为做出预测数学建模

13. 数学建模之虚拟轨道思想与“碰撞检测”

14. 数学建模之虚拟轨道思想与“碰撞检测” 轨道1 我是很⻓长的弹幕我是很⻓长的弹幕虚拟轨道我是很⾼高的弹幕轨道2 轨道3 轨道4 轨道5 虚拟轨道示意图

15. 数学建模之虚拟轨道思想与“碰撞检测” 弹幕1正在播放轨道1 弹幕2正在播放轨道2 轨道3 虚拟轨道我是很⾼高的弹幕 1. 计算弹幕需要轨道的数量量轨道4 轨道5 2. 计算是否可以容纳，如果是将相邻轨道标记为虚拟轨道 3. 消费完释放虚拟轨道虚拟轨道流程图

16. 数学建模之虚拟轨道思想与“碰撞检测” 物理理轨道数量量(count) = 幕布⾼高度(height) / 最⼩小字号弹幕⾼高度(h) 虚拟轨道所需物理理轨道数量量(count) = 幕布字号⾼高度(height) / 最⼩小字号弹幕⾼高度(h) 数学模型

17. 数学建模之虚拟轨道思想与“碰撞检测” 机场示意图

18. 数学建模之虚拟轨道思想与“碰撞检测” 跑道⻜飞机塔台机场调度模型

19. 数学建模之虚拟轨道思想与“碰撞检测” 启动弹幕请求数据数据转换播放时刻数据缓存播放器器播放时刻+2s 数据读取定时器器 2s 循环轨道申请轨道播放时刻弹幕退场弹幕队列列弹幕进场弹幕退场机场调度模型

20. 动画渲染&内存优化发热卡顿性能问题

21. 动画渲染&内存优化浏览器器⼯工作原理理

22. 动画渲染&内存优化 DOM JavaScript CSSOM Render Tree Layout Paint 性能瓶颈

23. 动画渲染&内存优化 GPU加速

24. 动画渲染&内存优化 transform opacity ﬁlter will-change 启⽤用GPU加速

25. 动画渲染&内存优化计算⾼高度绝对定位 DOM 内存优化定时销毁

26.

27.

28.

29.