javascript - Vue 写了个弹幕，出现很卡现象

Question

效果和代码。

http://u6.gg/Skx

运行久了之后会出现假死 或者 无响应 或者 开始有点卡了

求优化，或者给个解决方案。

Answer 1

弹幕增加速度比消失速度快，数量到一定程度之后肯定会卡。

解决办法的话增加弹幕队列的数量上限。

另外因为在不断调用js计算left，所以内存会越来越大，触发GC之后就也会导致卡顿。

然而为啥要用requestAnimationFrame，用css动画吧

Answer 2

用css3 动画?

Answer 3

定时器 一直在 页面中添加元素，
可以把 走到最左边的元素删除，只保留页面中的元素

Answer 4

this.data.barrage.item 有34个 控制一下
走到最左边的元素删除
还有一个注释掉控制台的日志
试一试

Answer 5

使用CSS3动画，起始位置为元素左侧贴屏幕右侧，停止位置为元素右侧贴屏幕左侧。
当动画结束的时候移动元素。

Answer 6

这个我之前做过 推荐用canvas盖在上面 dom始终会比较卡