효과 및 코드.
http://u6.gg/Skx
오랜 시간 동안 실행한 후에는 정지되거나 응답하지 않거나 약간 멈추기 시작합니다
최적화를 추구하거나 솔루션을 제공합니다.
탄막이 사라지는 속도보다 늘어나는 속도가 일정 수준에 도달하면 반드시 정체됩니다.
해결책은 사격 대기열 수의 상한을 늘리는 것입니다.
또한 왼쪽을 계산하기 위해 js가 지속적으로 호출되기 때문에 메모리가 점점 더 커지고 이로 인해 GC를 트리거한 후 지연도 발생합니다.
왜 requestAnimationFrame을 사용하나요? CSS 애니메이션을 사용하세요
CSS3 애니메이션을 사용하시나요?
타이머가 페이지에 요소를 계속 추가합니다. 맨 왼쪽으로 이동하는 요소는 삭제하고 페이지의 요소만 유지할 수 있습니다.
This.data.barrage.item에는 34개의 항목이 있습니다. 제어하세요가장 왼쪽 요소로 이동하여 삭제하세요콘솔이 주석 처리된 로그도 있습니다사용해 보세요
CSS3 애니메이션을 사용하면 시작 위치는 요소의 왼쪽과 화면의 오른쪽이고 정지 위치는 요소의 오른쪽과 화면의 왼쪽입니다. 애니메이션이 끝나면 요소를 이동하세요.
전에도 해본 적이 있어서 돔이 항상 붙어 있는 걸 추천해요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
탄막이 사라지는 속도보다 늘어나는 속도가 일정 수준에 도달하면 반드시 정체됩니다.
해결책은 사격 대기열 수의 상한을 늘리는 것입니다.
또한 왼쪽을 계산하기 위해 js가 지속적으로 호출되기 때문에 메모리가 점점 더 커지고 이로 인해 GC를 트리거한 후 지연도 발생합니다.
왜 requestAnimationFrame을 사용하나요? CSS 애니메이션을 사용하세요
CSS3 애니메이션을 사용하시나요?
타이머가 페이지에 요소를 계속 추가합니다.
맨 왼쪽으로 이동하는 요소는 삭제하고 페이지의 요소만 유지할 수 있습니다.
This.data.barrage.item에는 34개의 항목이 있습니다. 제어하세요
가장 왼쪽 요소로 이동하여 삭제하세요
콘솔이 주석 처리된 로그도 있습니다
사용해 보세요
CSS3 애니메이션을 사용하면 시작 위치는 요소의 왼쪽과 화면의 오른쪽이고 정지 위치는 요소의 오른쪽과 화면의 왼쪽입니다.
애니메이션이 끝나면 요소를 이동하세요.
전에도 해본 적이 있어서 돔이 항상 붙어 있는 걸 추천해요.