JavaScript - Vue は集中砲火を書きましたが、非常に行き詰まっていました。

Question

エフェクトとコード。

http://u6.gg/Skx

長時間実行すると、一時停止したり、応答がなかったり、少し固まり始めたりすることがあります。

最適化を求めるか、解決策を提示します。

Answer 1

弾幕は消えるよりも早く増加し、一定の数に達すると確実にスタックします。

解決策としては、弾幕キュー数の上限を増やしてください。

また、左の計算のためにjsが呼び出され続けるため、メモリがどんどん大きくなり、GCをトリガーしてからのラグも発生します。

しかし、なぜ requestAnimationFrame を使用するのでしょうか? CSS アニメーションを使用するのですか?

Answer 2

CSS3アニメーションを使用しますか?

Answer 3

タイマーはページに要素を追加し続けます
左端にある要素を削除して、ページ上に要素のみを残すことができます

Answer 4

This.data.barrage.item には 34 個の項目があります。それを制御します
一番左の要素に移動して削除します
コンソールがコメントアウトされたログもあります
試してみてください

Answer 5

CSS3アニメーションを使用し、開始位置は要素の左側と画面の右側、停止位置は要素の右側と画面の左側です。
アニメーションが終了したら要素を移動します。

Answer 6

以前にこれを行ったことがありますが、ドムは常に固着するため、それを覆うことをお勧めします。