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

전에도 해본 적이 있어서 돔이 항상 붙어 있는 걸 추천해요.