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
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
Use css3 animation?
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
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
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.
I have done this before. It is recommended to cover it with canvas. The dom will always be stuck