requestAnimationFrame 으로 프레임 타이밍 맞추기 🎨 글에 들어가기 앞서 브라우저는 화면을 그릴 때 다음과 같은 과정을 반복한다. 자바스크립트 실행DOM 변경 감지스타일 계산Layout (Reflow) – 요소의 위치와 크기를 계산Paint – 계산된 정보를 바탕으로 픽셀을 그리기Composite – 레이어를 조합해 최종적으로 화면에 출력위 사이클은 보통 1초에 60번, 약 16.6ms마다 반복되며, 브라우저는 이 주기에 맞춰 최대한 부드럽게 화면을 렌더링을 하는데, 자바스크립트에서 DOM을 조작하거나 애니메이션을 처리할 때 이 타이밍을 고려하지 않으면, 프레임 드롭, 끊김, 느려진 인터랙션 같은 문제가 쉽게 발생한다고 한다.✨ requestAnimationFrame 이란?window.requestAnimationFrame() 메서드는 브라우저에게 수.. 2025. 3. 30. 이전 1 다음
