如何实现一个不重叠、不碰撞的弹幕？
随着流媒体的快速发展，越来越多的短视频网站在视频播放上加上了弹幕功能，通过弹幕我们不仅可以实时观看到其他观众对视频的评论还可以与他们进行互动，但是如何实现一个不重叠，不碰撞的弹幕却成为了前端工程师面前的一道难题，接下来让我们来一起探讨下如何实现不重叠、不碰撞的弹幕吧~
弹幕从数据层面上来说，应该包含哪些信息？
- 弹幕的内容。
- 弹幕需要展现的时间。
- 弹幕的文字颜色。
- 弹幕飘过的速度。
- 弹幕文字的大小。
- 弹幕文字的透明度。
弹幕的两种实现方式
HTML+CSS或Canvas
这种方式的优点是可以很方便的给每条弹幕添加事件，比如常用的弹幕悬停并弹出选项，这是因为原生的DOM事件可以做到。但是这种方式实现的缺点就是不如Canvas性能好，因为需要创建大量的DOM节点，这样会对性能造成严重的影响。
弹幕页面应该包含哪些模块？
1. 轨道
轨道我们可以理解为将一个页面划分为20行，每一行都是一个轨道。在每一个轨道中输出弹幕的时候我们需要计算目标轨道中已经被弹幕占据的宽度。
2. 指挥官
指挥官的作用主要是在用户输入弹幕后，负责维护多个轨道、一个等待队列、一个弹幕池，指挥官需要需要控制弹幕的节奏，每渲染一帧都要判断其中的轨道是否有空位，有则从等待队列中取出合适的弹幕送到指定的轨道。
3. 弹幕池
弹幕池的作用就是避免频繁的DOM重建，会把已经退出屏幕左侧的弹幕存在一个指定的空间中，当有新弹幕时会重新复用这个DOM。
如何解决弹幕碰撞问题？
首先需要明确的是，并不是所有的弹幕类型都存在碰撞问题，弹幕的碰撞问题只存在于弹幕速度不同的情形下，假如弹幕的速度都一样是不会出现碰撞的。
避免碰撞的最好方式就是通过求出防止碰撞的最大追及速度，也就是追上它的速度，让弹幕B的速度等于这个最大追及速度即可。
