javascript - Vue wrote a barrage, but it was very stuck.

Question

Effects and codes.

http://u6.gg/Skx

After running for a long time, there will be suspended animation or no response or it will start to get a little stuck

Seek optimization or give a solution.

Answer 1

The barrage increases faster than it disappears. Once the number reaches a certain level, it will definitely become stuck.

The solution is to increase the upper limit of the number of barrage queues.

In addition, because js is continuously called to calculate left, the memory will become larger and larger, which will also cause lag after triggering GC.

But why use requestAnimationFrame? Use css animation

Answer 2

Use css3 animation?

Answer 3

The timer keeps adding elements to the page.
You can delete the elements that go to the far left and only keep the elements on the page

Answer 4

This.data.barrage.item has 34 items. Control it
Go to the leftmost element and delete it
There is also a log with the console commented out
Try it out

Answer 5

Using CSS3 animation, the starting position is the left side of the element and the right side of the screen, and the stop position is the right side of the element and the left side of the screen.
Move the element when the animation ends.

Answer 6

I have done this before. It is recommended to cover it with canvas. The dom will always be stuck