之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。
css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能1. css3实现乞丐版的弹幕
(1)如何通过css3实现弹幕
首先来看如何通过css的方法实现一个最简单的弹幕：
首先在html中定义一条弹幕的dom结构：
| <div class="block">我是弹幕</div> |
弹幕的移动可以通过移动这个block来实现，以从右向左移动的弹幕为例，弹幕的初始位置在容器的最左侧且贴边隐藏（弹幕的最左边与容器的最右贴合）,可以通过绝对定位加transform来实现：
| .block{ position:absolute; } |
初始位置：
| from{ left:100%; transform:translateX(0) } |
移动到最左边的结束位置为（弹幕的最右边与容器的最左边贴合）：
| to{ left:0; transform:translateX(-100%) } |
起始位置和结束位置的具体图示如下所示：
根据起始位置和结束位置可以定义完整的两帧弹幕动画：
| @keyframes barrage{ from{ left:100%; transform:translateX(0); } to{ left:0; transform:translateX(-100%); } } |
给弹幕元素引入这个动画：
| .block{ position:absolute; /* other decorate style */ animation:barrage 5s linear 0s; } |
这样就可以实现一个乞丐版的弹幕效果：
(2)通过绝对定位和left实现弹幕的缺陷
首先明确一下css的渲染过程
I）根据HTML的结构生成DOM树（DOM树中包含了display:none的节点） II）在DOM树的基础上，根据节点的几何属性（margin/padding/width/height/left等）生成render树 III）在render树的基础上继续渲染color,font等属性
其中如果I）中和II）中的属性发生变化会发生reflow(回流)，如果仅仅III）中的属性发生改变，只会发生repaint（重绘）。显然从css的渲染过程我们也可以看出来：reflow(回流）必伴随着重绘。
reflow(回流)：当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 repaint(重绘)：当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘
reflow（回流）会影响浏览器css的渲染速度，因此在做网页性能优化的时候要减少回流的发生。
