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總是會比較卡