반응형
메모리 누수
-
웹 애니메이션 성능을 끌어올리는 requestAnimationFrame(rAF) 활용법Tip 2025. 7. 24. 19:24
웹페이지를 구현할 때 가장 난감한 순간 중 하나는 애니메이션을 구현할 때인 것 같습니다.CSS만으로 구현할 수 있는 애니메이션이라면 다행이지만, JS로 스타일을 변화시켜야 되는 경우에는 생각보다 성능이 안 나오는 문제가 있습니다.(특히 모바일에서)이런 상황에서 최적화할 수 있는 API인 requestAnimationFrame(rAF)에 대해 알아보겠습니다.requestAnimationFrame은 무엇인가?requestAnimationFrame()은 쉽게 말해 브라우저에게 "다음 repaint 이전에 이 함수를 실행해 줘"라고 요청하는 API입니다. 콜백으로 전달된 함수는 브라우저 다음 프레임의 repaint 직전에 호출되며, 일반적으로 초당 60회(60 FPS) 호출됩니다.다만 실제 호출 빈도는 디스플레..